Gdzie należy umieścić tagi <script> w znacznikach HTML?

1487

Gdzie jest właściwe miejsce do umieszczenia <script>tagów i dołączonego kodu JavaScript podczas osadzania kodu JavaScript w dokumencie HTML ? Wydaje mi się, że nie należy umieszczać ich w <head>sekcji, ale umieszczanie jej na początku <body>jest również złe, ponieważ JavaScript musi zostać przeanalizowany, zanim strona zostanie całkowicie zrenderowana (lub coś w tym rodzaju). To wydaje się opuścić koniec tego <body>odcinka jako logiczny miejsce dla <script>tagów.

Więc gdzie jest właściwe miejsce na umieszczenie <script>tagów?

(To pytanie odnosi się do tego pytania , w którym zasugerowano, że wywołania funkcji JavaScript powinny być przenoszone z <a>tagów do <script>tagów. Używam jQuery, ale bardziej ogólne odpowiedzi są również odpowiednie.)

javascript jquery html mipadi
źródło
na wypadek, gdybyś również szukał prostego rozwiązania i używasz jakiegoś generatora po stronie serwera, takiego jak Jekyll, zalecam dołączenie do niego skryptu. o wiele prostsze!
cregox,

Odpowiedzi:

1861

Oto, co się dzieje, gdy przeglądarka ładuje witrynę z <script>tagiem:

  1. Pobierz stronę HTML (np. Index.html)
  2. Rozpocznij analizowanie kodu HTML
  3. Analizator składni napotka <script>znacznik odwołujący się do zewnętrznego pliku skryptu.
  4. Przeglądarka żąda pliku skryptu. W międzyczasie analizator blokuje i przestaje analizować inny kod HTML na stronie.
  5. Po pewnym czasie skrypt jest pobierany, a następnie wykonywany.
  6. Analizator składni kontynuuje analizowanie reszty dokumentu HTML.

Krok # 4 powoduje złe wrażenia użytkownika. Twoja witryna zasadniczo przestaje się ładować, dopóki nie pobierzesz wszystkich skryptów. Jeśli coś nienawidzi użytkowników, czeka na załadowanie strony internetowej.

Dlaczego tak się dzieje?

Każdy skrypt może wstawiać własny kod HTML za pośrednictwem document.write()lub innych manipulacji DOM. Oznacza to, że analizator składni musi poczekać, aż skrypt zostanie pobrany i wykonany, aby mógł bezpiecznie przeanalizować resztę dokumentu. W końcu skrypt mógł wstawić własny dokument HTML do dokumentu.

Jednak większość programistów JavaScript nie manipuluje już DOM podczas ładowania dokumentu. Zamiast tego czekają na załadowanie dokumentu, zanim go zmodyfikują. Na przykład:

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script src="my-script.js"></script>
    </head>
    <body>
        <div id="user-greeting">Welcome back, user</div>
    </body>
</html>

JavaScript:

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

Ponieważ twoja przeglądarka nie wie, że my-script.js nie zmodyfikuje dokumentu, dopóki nie zostanie pobrany i wykonany, analizator przestaje analizować.

Zalecenia przestarzałe

Stare podejście do rozwiązania tego problemu polegało na umieszczaniu <script>tagów na spodzie twojego <body>, ponieważ zapewnia to, że parser nie zostanie zablokowany do samego końca.

Takie podejście ma swój własny problem: przeglądarka nie może rozpocząć pobierania skryptów, dopóki cały dokument nie zostanie przeanalizowany. W przypadku większych witryn z dużymi skryptami i arkuszami stylów możliwość jak najszybszego pobrania skryptu jest bardzo ważna dla wydajności. Jeśli witryna nie załaduje się w ciągu 2 sekund, ludzie przejdą do innej witryny.

W optymalnym rozwiązaniu przeglądarka zacznie pobierać skrypty tak szybko, jak to możliwe, jednocześnie analizując resztę dokumentu.

Nowoczesne podejście

Obecnie przeglądarki obsługują skrypty asynci deferatrybuty. Te atrybuty mówią przeglądarce, że parsowanie skryptów jest bezpieczne.

asynchronizacja

<script src="path/to/script1.js" async></script>
<script src="path/to/script2.js" async></script>

Skrypty z atrybutem asynchronicznym są wykonywane asynchronicznie. Oznacza to, że skrypt jest wykonywany natychmiast po pobraniu, bez blokowania przeglądarki w międzyczasie.
Oznacza to, że możliwe jest pobranie i wykonanie skryptu 2 przed skryptem 1.

Według http://caniuse.com/#feat=script-async , 97,78% wszystkich przeglądarek obsługuje to.

odraczać

<script src="path/to/script1.js" defer></script>
<script src="path/to/script2.js" defer></script>

Skrypty z atrybutem odroczenia są wykonywane w kolejności (tj. Najpierw skrypt 1, a następnie skrypt 2). To również nie blokuje przeglądarki.

W przeciwieństwie do skryptów asynchronicznych, odroczone skrypty są wykonywane dopiero po załadowaniu całego dokumentu.

Według http://caniuse.com/#feat=script-defer 97,79% wszystkich przeglądarek obsługuje to. 98,06% popiera to co najmniej częściowo.

Ważna uwaga na temat kompatybilności przeglądarki: w niektórych przypadkach IE <= 9 może wykonywać odroczone skrypty w kolejności. Jeśli potrzebujesz obsługi tych przeglądarek, przeczytaj to najpierw!

Wniosek

Obecnym stanem techniki jest umieszczanie skryptów w <head>tagu i używanie atrybutów asynclub defer. Pozwala to na szybkie pobieranie skryptów bez blokowania przeglądarki.

Dobrą rzeczą jest to, że witryna powinna nadal poprawnie ładować się w 2% przeglądarek, które nie obsługują tych atrybutów, przy jednoczesnym przyspieszeniu pozostałych 98%.

Bart
źródło
63
Dziwi mnie, że nikt nie cytował wyjaśnień Google ... developers.google.com/speed/docs/insights/BlockingJS
Casey Falk
6
Nie jestem pewien, co dotyka DOM, a co nie. Możesz wyjaśnić? Czy bezpiecznie jest wykonać asynchroniczne ładowanie czegoś takiego jak jquery.js?
Doug
7
@Doug Na przykład document.writedziała na dom. Pytanie nie dotyczy tego, czy skrypt manipuluje domem, ale kiedy to robi. Tak długo, jak wszystkie manipulacje domem mają miejsce po domreadyuruchomieniu zdarzenia, wszystko jest w porządku. jQuery jest biblioteką i jako taka nie - lub nie powinna - sama manipulować domeną.
Bart
24
Ta odpowiedź jest myląca. Nowoczesne przeglądarki nie przestają parsować, gdy osiągną znacznik skryptu synchronicznego, który może wpływać na HTML, po prostu przestają renderować / wykonywać i kontynuują parsowanie z optymizmem, aby rozpocząć pobieranie innych zasobów, które prawdopodobnie zostaną zażądane później, jeśli HTML nie zostanie zmieniony.
Fabio Beltramini
40
Dlaczego asynci deferatrybuty nie są nigdzie używane? Mam na myśli, że przeglądałem wiele źródeł HTML z Internetu asynci defernigdzie nie widzę atrybutów. ...
john cj
239

Tuż przed zamykającym znacznikiem body, jak podano na

http://developer.yahoo.com/performance/rules.html#js_bottom

Umieść skrypty na dole

Problem spowodowany przez skrypty polega na tym, że blokują one równoległe pobieranie. Specyfikacja HTTP / 1.1 sugeruje, że przeglądarki pobierają nie więcej niż dwa składniki równolegle na nazwę hosta. Jeśli udostępniasz swoje obrazy z wielu nazw hostów, możesz uzyskać więcej niż dwa pobrania równolegle. Podczas pobierania skryptu przeglądarka nie rozpocznie żadnych innych pobrań, nawet na różnych nazwach hostów.

Cammel
źródło
7
Zgodził się z koncepcją i jej wyjaśnieniem. Ale co się stanie, jeśli użytkownik zacznie bawić się stroną. Załóżmy, że mam listę rozwijaną AJAX, która zacznie się ładować po wyświetleniu strony użytkownikowi, ale podczas ładowania użytkownik ją kliknie! A jeśli „naprawdę niecierpliwy” użytkownik prześle formularz?
Hemant Tank
9
@Hermant Stary komentarz, ale możesz zrobić sztuczkę, wyłączając pola domyślnie, a następnie włączając je przy użyciu JS, gdy DOM jest w pełni załadowany. Wydaje się, że to właśnie robi Facebook.
novato
2
Właśnie przetestowałem to z chromem, aby sprawdzić, czy nadal jest tak samo. To jest. Tutaj możesz sprawdzić różnice w czasie ładowania strony w swoich przeglądarkach. stevesouders.com/cuzillion
szyfr
46
Jeśli jest to najlepsza praktyka, dlaczego przepełnienie stosu obejmuje wszystkie ich znaczniki skryptu w <head>? :-P
Philip
10
W niektórych przypadkach, szczególnie w ciężkich witrynach ajax, ładowanie w głowę może faktycznie skrócić czas ładowania. Zobacz: encosia.com/dont-let-jquerys-document-ready-slow-you-down (zwróć uwagę, że funkcja „live ()” jest przestarzała w jquery, ale artykuł nadal ma zastosowanie „on ()” lub „ delegować ”). Ładowanie <head> może być również konieczne, aby zagwarantować prawidłowe zachowanie, jak wskazał @Hermant. Wreszcie modernizr.com/docs zaleca umieszczenie swoich skryptów w <head> z powodów wyjaśnionych na stronie.
Nathan
76

Nieblokujące tagi skryptowe można umieszczać niemal wszędzie:

<script src="script.js" async></script>
<script src="script.js" defer></script>
<script src="script.js" async defer></script>
  • async skrypt zostanie wykonany asynchronicznie, gdy tylko będzie dostępny
  • defer skrypt jest wykonywany po zakończeniu analizy dokumentu
  • async defer skrypt wraca do zachowania odroczenia, jeśli asynchronizacja nie jest obsługiwana

Takie skrypty będą wykonywane asynchronicznie / po przygotowaniu dokumentu, co oznacza, że ​​nie możesz tego zrobić:

<script src="jquery.js" async></script>
<script>jQuery(something);</script>
<!--
  * might throw "jQuery is not defined" error
  * defer will not work either
-->

Albo to:

<script src="document.write(something).js" async></script>
<!--
  * might issue "cannot write into document from an asynchronous script" warning
  * defer will not work either
-->

Albo to:

<script src="jquery.js" async></script>
<script src="jQuery(something).js" async></script>
<!--
  * might throw "jQuery is not defined" error (no guarantee which script runs first)
  * defer will work in sane browsers
-->

Albo to:

<script src="document.getElementById(header).js" async></script>
<div id="header"></div>
<!--
  * might not locate #header (script could fire before parser looks at the next line)
  * defer will work in sane browsers
-->

Mimo to skrypty asynchroniczne mają następujące zalety:

  • Równoległe pobieranie zasobów :
    przeglądarka może pobierać arkusze stylów, obrazy i inne skrypty równolegle bez oczekiwania na pobranie i uruchomienie skryptu.
  • Niezależność od źródła :
    możesz umieścić skrypty w głowie lub ciele bez obawy o blokowanie (przydatne, jeśli korzystasz z CMS). Kolejność wykonania wciąż ma jednak znaczenie.

Możliwe jest obejście problemów z kolejnością wykonywania za pomocą zewnętrznych skryptów obsługujących wywołania zwrotne. Wiele zewnętrznych interfejsów API JavaScript obsługuje teraz nieblokujące wykonywanie. Oto przykład asynchronicznego ładowania interfejsu API Map Google .

Salman A.
źródło
2
To jest prawidłowa odpowiedź na dziś - zastosowanie tego podejścia oznacza, że ​​łatwiej jest utrzymać widżety w spokoju, bez potrzeby robienia <head>logiki.
Daniel Sokolowski,
1
Jestem mylić dlaczego nie można używać asynclub defergdy w tym jQuery, jak można określić w swoim drugim bloku: <script src="jquery.js" async></script>. Czy potrafisz wyjaśnić, dlaczego? Pomyślałem, że muszę mieć tag asynchroniczny dla wydajności - zgodnie z przyjętą odpowiedzią - aby moja strona mogła się załadować, nawet gdy jQuery wciąż się ładuje]. Dzięki!
elbowlobstercowstand
3
@elbow 99% razy <script src=jquery.js>następuje $(function(){ ... })gdzieś na stronie blok. Ładowanie asynchroniczne nie gwarantuje, że jQuery zostanie załadowane, gdy przeglądarka spróbuje parsować te bloki, dlatego podniesie $ nie zdefiniowany błąd (możesz nie otrzymać błędu, jeśli jQuery został załadowany z pamięci podręcznej). Odpowiedziałem na pytanie dotyczące asynchronicznego ładowania jQuery i zachowania $(function(){ ... }). Zobaczę, czy mogę to znaleźć, lub możesz spojrzeć na to pytanie: stackoverflow.com/q/14811471/87015
Salman
1
@SalmanA Dziękujemy! Tak, mieszczę się w tym 99%. Najpierw muszę jqueryzaładować bibliotekę, a potem pozostałe .jsskrypty. Kiedy deklaruję asynclub deferna jqueryznaczniku skryptowym lib, moje .jsskrypty nie działają. Myślałem, że $(function(){ ... })to chronię - nie sądzę. Aktualny rozwiązanie: Nie dodawać deferlub asyncna jquerylib skrypcie, ale nie dodać asyncna mojej Kontynuacja .jsskryptów. Uwaga: powodem robię każdy tego jest, aby Google Page Speed szczęśliwy. Jeszcze raz dziękuję za pomoc! Wszelkie inne porady są mile widziane. (Lub link do Twojej poprzedniej odpowiedzi). :)
elbowlobstercowstand
@elbow Patrz stackoverflow.com/a/21013975/87015 , da ci tylko pomysł, ale nie kompletne rozwiązanie. Zamiast tego możesz wyszukać „biblioteki ładujące asynchroniczne jquery”.
Salman A,
38

Standardowa rada promowana przez Yahoo! Zespół <script>ds. Wyjątkowej wydajności umieszcza tagi na końcu treści dokumentu, aby nie blokowały renderowania strony.

Istnieją jednak nowsze podejścia, które oferują lepszą wydajność, jak opisano w tej odpowiedzi na temat czasu ładowania pliku JavaScript Google Analytics:

Jest kilka świetnych slajdów Steve'a Soudersa (eksperta od wydajności po stronie klienta) na temat:

  • Różne techniki równoległego ładowania zewnętrznych plików JavaScript
  • ich wpływ na czas ładowania i renderowanie strony
  • jakie rodzaje wskaźników „w toku” wyświetla przeglądarka (np. „ładowanie” na pasku stanu, kursor myszy klepsydry).
orip
źródło
25

Jeśli używasz JQuery, umieść javascript tam, gdzie znajdziesz go najlepiej i użyj $(document).ready() aby upewnić się, że wszystko zostało poprawnie załadowane przed uruchomieniem jakichkolwiek funkcji.

Na marginesie: podoba mi się wszystkie moje tagi skryptu w <head>sekcji, ponieważ wydaje się to najczystsze miejsce.

Andrew Hare
źródło
14
w głowie ... eee? <header>?
Dan Lugg,
7
Zauważ, że użycie $(document).ready()nie oznacza, że ​​możesz umieścić JavaScript w dowolnym miejscu - nadal musisz go umieścić po miejscu, w <script src=".../jquery.min.js">którym umieścisz jQuery, więc $istnieje.
Rory O'Kane,
2
Umieszczanie znaczników skryptu w sekcji <head> nie jest optymalne - opóźni to wyświetlenie widocznej części strony do momentu załadowania skryptów.
CyberMonk
Nie, @Dan, headerelement jest częścią zawartości dokumentu HTML i powinien wystąpić raz lub więcej razy w obrębie bodyelementu . The head` tag dla danych metadanych i danych innych niż treść dokumentu. Jest to, w tych dniach, ze deferi asyncto idealne miejsce dla tagów skryptu. headerelementy powinny zawierać tylko informacje opisujące następującą sekcję dokumentu.
ProfK
1
@ProfK, Dan odniósł się do pierwotnego, niezredagowanego pytania, gdy opublikował je ponad 4 lata temu. Jak widać, pytanie zostało zredagowane rok później.
kojow7
18

Nowoczesne podejście w 2019 roku wykorzystuje skrypty typu modułu ES6 .

<script type="module" src="..."></script>

Domyślnie moduły są ładowane asynchronicznie i odraczane. tzn. możesz umieścić je w dowolnym miejscu, a będą one ładowane równolegle i wykonywane po zakończeniu ładowania strony.

Różnice między skryptem a modułem opisano tutaj:

https://stackoverflow.com/a/53821485/731548

Wykonanie modułu w porównaniu ze skryptem opisano tutaj:

https://developers.google.com/web/fundamentals/primers/modules#defer

Wsparcie pokazano tutaj:

https://caniuse.com/#feat=es6-module

cquezel
źródło
fajne informacje do dodania do bazy wiedzy
Sagar
1
Tylko uwaga, że ​​to nie zadziała, jeśli po prostu próbujesz rzeczy na lokalnym systemie plików bez serwera. Przynajmniej w Chrome pojawia się błąd krzyżowy, który próbuje załadować plik js z kodu HTML, mimo że oba mają to samo pochodzenie - twój system plików.
hippietrail
11

XHTML nie będzie sprawdzany, jeśli skrypt znajduje się w innym miejscu niż element head. okazuje się, że może być wszędzie.

Możesz odroczyć wykonanie za pomocą czegoś takiego jak jQuery, aby nie miało znaczenia, gdzie jest umieszczone (z wyjątkiem niewielkiego spadku wydajności podczas analizowania).

Allain Lalonde
źródło
1
XHTML sprawdzi poprawność za pomocą znaczników skryptu w treści, zarówno ścisłych, jak i przejściowych. Tagi stylu mogą jednak znajdować się tylko w głowie.
I.devries
11 
<script src="myjs.js"></script>
</body>

Znacznika skryptu należy używać zawsze przed zamknięciem treści lub na dole pliku HTML .

wtedy możesz najpierw zobaczyć zawartość strony przed załadowaniem pliku js .

zaznacz to, jeśli to konieczne: http://stevesouders.com/hpws/rule-js-bottom.php

AmanKumar
źródło
2
To faktycznie odpowiedziało na pytanie. Zastanawiałem się, że prawie wszystkie zamieszczone przykłady nigdy nie zawierały właściwego wizualnego kontekstu „końca strony”
Ken Ingram,
1
Ta odpowiedź jest bardzo myląca i najprawdopodobniej błędna. Artykuły w Google i MDN sugerują, że synchroniczny JS (tak jest tutaj) zawsze blokuje budowę DOM i parsowanie, co spowoduje opóźnione pierwsze renderowanie. Dlatego nie możesz zobaczyć zawartości strony, dopóki plik JS nie zostanie pobrany i nie zakończy się, niezależnie od tego, gdzie umieścisz plik JS w dokumencie HTML, o ile jest on synchroniczny
Lingaraju EV,
Odwołuje się także do punktów poczynionych w 2009 r. I nie ma już znaczenia.
toxaq
7

Konwencjonalna (i powszechnie akceptowana) odpowiedź brzmi „na dole”, ponieważ wtedy cały DOM zostanie załadowany, zanim cokolwiek zacznie działać.

Z różnych powodów istnieją dysydenci, zaczynając od dostępnej praktyki, aby celowo rozpocząć wykonywanie zdarzenia zdarzenia onload strony.

dkretz
źródło
6

Najlepsze miejsce, aby umieścić <script>znacznik jest przed zamknięciem </body>tagu , więc pobieranie i wykonywanie nie blokuje przeglądarkę do analizowania HTML w dokumencie,

Również ładowanie plików js na zewnątrz ma swoje zalety, ponieważ będzie buforowane przez przeglądarki i może przyspieszyć ładowanie strony , oddziela kod HTML i JavaScript i pomaga lepiej zarządzać bazą kodu .

ale nowoczesne przeglądarki obsługują też kilka innych sposobów optymalnych jak asynci deferdo ładowania zewnętrznych javascriptplików.

Asynchronizacja i odraczanie

Zwykle wykonywanie strony HTML rozpoczyna się linia po linii. Po napotkaniu zewnętrznego elementu JavaScript, parsowanie HTML jest zatrzymywane, dopóki JavaScript nie zostanie pobrany i gotowy do wykonania. To normalne wykonanie strony można zmienić za pomocą deferi asyncatrybutu.

Defer

Gdy używany jest atrybut odroczenia, JavaScript jest pobierany równolegle z analizą HTML, ale zostanie wykonany dopiero po zakończeniu pełnej analizy HTML.

<script src="/local-js-path/myScript.js" defer></script>

Async

Gdy używany jest atrybut asynchroniczny, JavaScript jest pobierany, gdy tylko skrypt zostanie napotkany, a po pobraniu zostanie wykonany asynchronicznie (równolegle) wraz z analizą HTML.

<script src="/local-js-path/myScript.js" async></script>

Kiedy stosować które atrybuty

  • Jeśli twój skrypt jest niezależny od innych skryptów i ma budowę modułową, użyj async.
  • Jeśli ładujesz skrypt 1 i skrypt 2 async, oba będą działać
    równolegle wraz z analizą HTML, gdy tylko zostaną pobrane
    i będą dostępne.
  • Jeśli twój skrypt zależy od innego skryptu, użyj deferobu:
  • Gdy skrypt1 i skrypt2 są ładowane w tej kolejności defer, skrypt 1 ma zagwarantowane wykonanie w pierwszej kolejności,
  • Następnie skrypt2 zostanie wykonany po pełnym uruchomieniu skryptu 1.
  • Musisz to zrobić, jeśli skrypt2 zależy od skryptu 1.
  • Jeśli twój skrypt jest wystarczająco mały i jest zależny od innego skryptu typu, asyncużyj skryptu bez atrybutów i umieść go ponad wszystkimi asyncskryptami.

referencja: Knowledgehills.com

Haritsinh Gohil
źródło
3

Zależy, jeśli ładujesz skrypt, który jest niezbędny do stylizacji strony / używasz akcji na stronie (jak kliknięcie przycisku), lepiej umieść go na górze. Jeśli Twoja stylizacja jest w 100% CSS i masz wszystkie opcje zastępcze dla akcji przycisków, możesz umieścić ją na dole.

Lub najlepszą rzeczą (jeśli to nie dotyczy) jest to, że możesz zrobić modalne pole ładowania, umieścić javascript na dole strony i sprawić, aby zniknął, gdy ładuje się ostatni wiersz skryptu. W ten sposób można uniknąć używania przez użytkowników akcji na stronie przed załadowaniem skryptów. A także unikaj niewłaściwej stylizacji.

ahmedmzl
źródło
3

Dołączanie skryptów na końcu jest używane głównie tam, gdzie najpierw ma zostać wyświetlona treść / style witryny.

Umieszczenie skryptów w głowie ładuje skrypty wcześnie i można z nich korzystać przed załadowaniem całej witryny.

jeśli skrypty zostaną wprowadzone w końcu, sprawdzanie poprawności nastąpi dopiero po załadowaniu całego stylu i projektu, co nie jest doceniane w przypadku szybko reagujących stron internetowych.

Sanjeev S.
źródło
2

W zależności od skryptu i jego użycia najlepszym możliwym (pod względem obciążenia strony i czasu renderowania) może nie być użycie zwykłego znacznika <script> jako takiego, ale dynamiczne wyzwalanie ładowania skryptu asynchronicznie.

Istnieje kilka różnych technik, ale najprostszym z nich jest użycie document.createElement („skrypt”) po uruchomieniu zdarzenia window.onload. Następnie skrypt jest ładowany jako pierwszy, gdy sama strona została zrenderowana, co nie wpływa na czas oczekiwania użytkownika na wyświetlenie strony.

To oczywiście wymaga, aby sam skrypt nie był potrzebny do renderowania strony.

Więcej informacji można znaleźć w poście Skrypty asynchroniczne Steve'a Soudersa (twórcy YSlow, ale teraz w Google).

stpe
źródło
2

  • Jeśli nadal dbasz o wsparcie i wydajność w IE <10, najlepiej ZAWSZE spraw, aby tagi skryptów były ostatnimi tagami treści HTML. W ten sposób masz pewność, że reszta DOM została załadowana i nie będziesz blokować i renderować.

  • Jeśli nie przejmujesz się zbytnio IE <10, możesz umieścić swoje skrypty w nagłówku dokumentu i użyć deferich, aby działały dopiero po załadowaniu DOM ( <script type="text/javascript" src="path/to/script1.js" defer></script>). Jeśli nadal chcesz, aby Twój kod działał w IE <10, nie zapomnij jednak owinąć kodu window.onloadnawet parzystym!


źródło
W przyjętej odpowiedzi jest to określane jako „przestarzała rekomendacja”. Jeśli nadal masz na myśli, prawdopodobnie powinieneś podać jakieś odniesienie do tego.
dakab
1

Skrypty blokują ładowanie DOM, dopóki nie zostanie załadowane i wykonane.

Jeśli umieścisz skrypty na końcu <body>całego DOM, ma szansę załadować i wyrenderować (strona „wyświetli” się szybciej).<script>będzie miał dostęp do wszystkich tych elementów DOM.

Z drugiej strony umieszczenie go po <body> starcie lub powyżej spowoduje wykonanie skryptu (gdzie nadal nie ma elementów DOM).

Dołączasz jQuery, co oznacza, że ​​możesz go umieścić gdziekolwiek zechcesz i użyj .ready ()

Szymon Toda
źródło
1

Myślę, że to zależy od wykonania strony. Jeśli strona, którą chcesz wyświetlić, nie może zostać poprawnie wyświetlona bez uprzedniego załadowania JavaScript, najpierw musisz dołączyć plik JavaScript. Ale jeśli możesz wyświetlić / wyrenderować stronę internetową bez początkowego pobrania pliku JavaScript, powinieneś umieścić kod JavaScript na dole strony. Ponieważ będzie emulować szybkie ładowanie strony, a z punktu widzenia użytkownika wygląda na to, że strona ładuje się szybciej.

Amit Mhaske
źródło
1

Możesz umieścić większość <script>odniesień na końcu <body>,
ale jeśli na twojej stronie znajdują się aktywne komponenty, które używają zewnętrznych skryptów,
to ich zależność (pliki js) powinna być wcześniejsza (najlepiej w tagu head).

Tech AG
źródło
1

Przed końcem tagu body w celu zapobiegania i blokowania interfejsu użytkownika.

Anoop Gupta
źródło
-1

Na końcu dokumentu HTML

Aby nie wpłynęło to na ładowanie dokumentu HTML w przeglądarce podczas wykonywania.

Mr_Blue
źródło
-1

Najlepszym miejscem do napisania JavaScriptkodu jest koniec dokumentu za </body>znacznikiem lub bezpośrednio przed nim, aby najpierw załadować dokument, a następnie wykonać kod js.

<script> ... your code here ... </script>
</body>

A jeśli napiszesz, w JQuerydokumencie głównym może znajdować się następujący tekst, który zostanie wykonany po załadowaniu dokumentu:

<script>
$(document).ready(function(){
   //your code here...
});
</script>
nada diaa
źródło
rzucaSyntaxError
Raz
Twoja odpowiedź nie była zła, ale bardzo potrzebowała aktualizacji.
Paul Carlton
-2

Bardziej sensowne jest dla mnie dołączenie skryptu po kodzie HTML. Ponieważ przez większość czasu potrzebuję Dom do załadowania przed wykonaniem skryptu. Mógłbym umieścić go w tagu head, ale nie podoba mi się cały moduł nasłuchujący ładowania dokumentu. Chcę, aby mój kod był krótki, słodki i łatwy do odczytania.

Słyszałem, że stare wersje safari były dziwne, gdy dodawałeś skrypt poza tag tagu head, ale mówię, kogo to obchodzi. Nie znam nikogo, kto używa tego starego badziewia, prawda?

Przy okazji, dobre pytanie.

zachdyer
źródło
-6

Możesz umieścić tam, gdzie chcesz skrypty, a jeden nie jest lepszy od innej praktyki.

sytuacja wygląda następująco:

Strona ładuje się liniowo, „z góry na dół”, więc jeśli umieścisz skrypt w nagłówku, upewni się, że zacznie się ładować przed wszystkim, teraz, jeśli umieścisz go w treści zmieszanej z kodem, może to spowodować nieładne ładowanie strony.

określenie dobrej praktyki nie zależy od tego, gdzie.

aby cię wesprzeć, wspomnę o następujących rzeczach:

możesz umieścić:

a strona załaduje się liniowo

strona jest ładowana asynchronicznie z inną zawartością

zawartość strony zostanie załadowana przed i po zakończeniu ładowania skrypty są ładowane

Dobrą praktyką byłoby, kiedy wdroży każdą z nich?

Mam nadzieję, że byłem pomocny, cokolwiek, tylko odpowiedz mi na ten problem.

Juan Miguel
źródło