Gdzie umieścić tagi w znacznikach HTML?

Podczas osadzania JavaScript w dokumencie HTML, gdzie jest właściwe miejsce do umieszczenia znaczników <script> i dołączonego JavaScript? Wydaje mi się, że nie powinieneś umieszczać ich w sekcji <head>, ale umieszczanie ich na początku sekcji <body> jest również złe, ponieważ JavaScript będzie musiał zostać przetworzony, zanim strona zostanie całkowicie wyrenderowana (lub coś w tym stylu). Wydaje się, że zostawia koniec sekcji <body> jako logiczne miejsce dla znaczników <script>.

Więc, gdzie czy jest właściwym miejscem do umieszczenia <script> tagów?

(to pytanie odwołuje się do to pytanie, w którym zasugerowano, że wywołania funkcji JavaScript powinny zostać przeniesione ze znaczników <a> do znaczników <script>. Konkretnie używam jQuery, ale bardziej ogólne odpowiedzi są również odpowiednie.)

Author: Community, 2009-01-12
Source

20 answers

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

  1. pobranie strony HTML (np. indeks.html)
  2. Zacznij analizować HTML
  3. parser napotka znacznik <script> odwołujący się do zewnętrznego pliku skryptu.
  4. przeglądarka żąda pliku skryptu. Tymczasem parser blokuje i przestaje analizować inny HTML na twojej stronie.
  5. po pewnym czasie skrypt jest pobierany, a następnie wykonywany.
  6. parser kontynuuje analizowanie reszty dokumentu HTML.

Krok # 4 powoduje złe wrażenia użytkownika. Twoja strona w zasadzie przestaje się ładować, dopóki nie pobierzesz wszystkich skryptów. Jeśli jest jedna rzecz, której użytkownicy nienawidzą, to czeka na załadowanie strony.

Dlaczego tak się dzieje?

Każdy skrypt może wstawić własny HTML poprzez document.write() lub inne manipulacje DOM. Oznacza to, że parser musi poczekać, aż skrypt zostanie pobrany i wykonany, zanim będzie mógł bezpiecznie przetworzyć resztę dokument. W końcu skrypt mógł wstawić własny HTML do dokumentu.

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

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script type="text/javascript" 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 zna my-script.js nie będzie modyfikować dokumentu, dopóki nie zostanie pobrany i wykonany, parser przestaje parsować.

Zalecenie Antyczne

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

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

W optymalnym rozwiązaniu, przeglądarka rozpocznie pobieranie skryptów tak szybko, jak to możliwe, jednocześnie analizując resztę dokumentu.

Nowoczesne podejście

Obecnie przeglądarki obsługują atrybuty async i defer w skryptach. Te atrybuty mówią przeglądarce, że można bezpiecznie kontynuować parsowanie podczas skryptów ściągnięty.

Async 

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

Skrypty z atrybutem asynchronicznym są wykonywane asynchronicznie. Oznacza to, że skrypt jest wykonywany natychmiast po jego 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 , 94.57% wszystkich przeglądarek to popiera.

Defer 

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

Skrypty z odroczeniem atrybuty są wykonywane w kolejności (tzn. najpierw skrypt 1, Potem skrypt 2). To również nie blokuje przeglądarki.

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

Według http://caniuse.com/#feat=script-defer , 94.59% wszystkich przeglądarek to popiera. 94,92% popiera ją przynajmniej częściowo.

Ważna uwaga na temat kompatybilności przeglądarki: w pewnych okolicznościach IE to !

Podsumowanie

Aktualnym stanem techniki jest umieszczanie skryptów w znaczniku <head> i używanie atrybutów async lub defer. Dzięki temu skrypty można pobrać jak najszybciej bez blokowania przeglądarki.

Dobrą rzeczą jest to, że Twoja strona powinna nadal ładować się poprawnie na 6% przeglądarek, które nie obsługują tych atrybutów, przyspieszając Pozostałe 94%.

 1508
Author: Bart,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-22 19:29:48

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

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

Umieść Skrypty Na Dole

Problem powodowany przez skrypty polega na tym, że blokują one pobieranie równoległe. Specyfikacja HTTP/1.1 sugeruje, że przeglądarki pobierają nie więcej niż dwa komponenty równolegle na nazwę hosta. Jeśli wyświetlasz obrazy z wielu nazw hostów, możesz pobrać więcej niż dwa pliki do pobrania równolegle. Podczas gdy skrypt się pobiera, jednak przeglądarka nie uruchomi żadnych innych pobierania, nawet na różnych nazwach hostów.

 219
Author: Cammel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-02 13:58:27

Nieblokujące znaczniki skryptów mogą być umieszczone w dowolnym miejscu: 

<script src="script.js" async></script>
<script src="script.js" defer></script>
<script src="script.js" async defer></script>
  • async skrypt zostanie uruchomiony asynchronicznie, gdy tylko będzie dostępny
  • defer skrypt jest wykonywany po zakończeniu parsowania 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żna to: 

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

Lub 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
-->

Lub 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
-->

Lub 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 oferują te zalety:

  • równoległe pobieranie zasobów :
    Przeglądarka może pobierać arkusze stylów, obrazy i Inne skrypty równolegle, nie czekając na skrypt do pobrania i wykonania.
  • Source order independence :
    Możesz umieścić Skrypty wewnątrz głowy lub ciała, nie martwiąc się o blokowanie (przydatne, jeśli korzystasz z CMS). Kolejność wykonania nadal jednak ma znaczenie.

Możliwe jest obejście problemów z kolejnością wykonania za pomocą zewnętrznych skryptów obsługujących wywołania zwrotne. Wiele interfejsów API JavaScript innych firm obsługuje teraz wykonywanie bez blokowania. Oto przykład wczytywania asynchronicznie API Google Maps .

 60
Author: Salman A,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-06 13:37:32

Standardowe porady, promowane przez Yahoo! Wyjątkowy zespół wydajnościowy, polega na umieszczeniu znaczników <script> na końcu dokumentu, aby nie blokowały renderowania strony.

Ale są pewne nowsze podejścia, które oferują lepszą wydajność, jak opisano w Ta odpowiedź na temat czasu ładowania pliku JavaScript Google Analytics:

Istnieją świetne slajdy autorstwa Steve ' a Soudersa (eksperta od wydajności po stronie klienta) o:

  • różne techniki równoległego ładowania zewnętrznych plików JavaScript
  • ich wpływ na czas ładowania i renderowania strony
  • jakie wskaźniki" w toku "wyświetla przeglądarka (np. 'wczytywanie' na pasku stanu, kursor myszki klepsydry).
 36
Author: orip,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-12 20:49:58

Jeśli używasz JQuery, umieść javascript tam, gdzie znajdziesz go najlepiej i użyj $(document).ready(), aby upewnić się, że rzeczy są ładowane poprawnie przed wykonaniem jakichkolwiek funkcji.

Na marginesie: lubię wszystkie moje znaczniki skryptu w sekcji <head>, ponieważ wydaje się to być najczystsze miejsce.

 20
Author: Andrew Hare,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-02 14:05:52

XHTML nie będzie sprawdzał poprawności, 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, więc nie ma znaczenia, gdzie jest umieszczone (poza małym uderzeniem wydajności podczas parsowania).

 9
Author: Allain Lalonde,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-12 19:05:41 
<script src="myjs.js"></script>
</body>

Znacznik skryptu powinien być używany zawsze przed body close lub Bottom w pliku HTML.

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

Sprawdź to, jeśli wymagają : http://stevesouders.com/hpws/rule-js-bottom.php

 8
Author: AmanKumar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-05 13:35:28

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

Istnieją dysydenci, z różnych powodów, począwszy od dostępnej praktyki, aby celowo rozpocząć wykonanie ze zdarzeniem page onload.

 5
Author: dkretz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-12 18:18:48

W zależności od skryptu i jego użycia najlepszym z możliwych (pod względem czasu ładowania strony i renderowania) może być nie używanie konwencjonalnego znacznika

Istnieje kilka różnych technik, ale najbardziej prosto jest użycie dokumentu.createElement ("skrypt") gdy okno.zostanie wywołane zdarzenie onload. Wtedy skrypt jest ładowany jako pierwszy, gdy strona została wyrenderowana, nie wpływając tym samym na czas, w którym użytkownik musi czekać na pojawienie się strony.

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

Aby uzyskać więcej informacji, zobacz post łączenie skryptów asynchronicznych autorstwa Steve ' a Soudersa (twórcy YSlow, ale teraz w Google).

 1
Author: stpe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-12 21:06:03

Zależy, jeśli ładujesz skrypt, który jest niezbędny do stylizacji strony / korzystania z działań na stronie (jak kliknięcie przycisku) to lepiej umieść go na górze. Jeśli Twoja stylizacja jest w 100% CSS i masz wszystkie opcje awaryjne dla akcji przycisku, możesz umieścić go na dole.

Lub najlepszą rzeczą (jeśli to nie problem) jest to, że możesz zrobić modalne pole ładowania, umieścić swój javascript na dole strony i sprawić, że zniknie, gdy ostatnia linia skryptu zostanie załadowany. W ten sposób można uniknąć korzystania przez użytkowników z akcji na stronie przed załadowaniem skryptów. A także uniknąć niewłaściwej stylizacji.

 0
Author: ahmedmzl,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-18 04:41:17

Skrypt blokuje Ładowanie DOM dopóki nie zostanie załadowany i wykonany.

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

W innym przypadku umieszczenie go po <body> start lub powyżej spowoduje uruchomienie skryptu (gdzie nadal nie ma elementów DOM).

Dołączasz jQuery, co oznacza, że możesz go umieścić gdziekolwiek chcesz i użyć .gotowe()

 0
Author: Szymon Toda,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-29 12:38:16

  • Jeśli nadal bardzo zależy ci na wsparciu i wydajności w IE

  • Jeśli nie zależy Ci już zbytnio na IEdefer, aby upewnić się, że działają tylko po załadowaniu DOM (<script type="text/javascript" src="path/to/script1.js" defer></script>). Jeśli nadal chcesz, aby Twój kod pracuj w IEwindow.onload!

 0
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-20 20:40:19

Myślę, że to zależy od wykonania strony. Jeśli strona, którą chcesz wyświetlić nie może wyświetlić się poprawnie bez ładowania JavaScript najpierw należy dołączyć plik JavaScript. Ale jeśli możesz wyświetlić/renderować stronę internetową bez wstępnego pobierania pliku JavaScript, powinieneś umieścić kod JavaScript na dole strony. Ponieważ emuluje szybkie ładowanie strony, a z punktu widzenia użytkownika wydaje się, że strona ładuje się szybciej.

 0
Author: Amit Mhaske,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-01 07:09:57

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

 0
Author: Tech AG,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-27 15:51:22

Najlepsze miejsce, aby napisać kod JavaScript na końcu kodu dokumentu po znaczniku, aby załadować dokument, a następnie wykonać kod js. and if u write JQuery code write 

$(document).ready (function{

//your code here

});
 0
Author: nada diaa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-28 17:29:35

W tym Skrypty na końcu jest używany głównie tam, gdzie zawartość / style witryny ma być wyświetlana jako pierwsza.

Włączenie skryptów w nagłówku wczytuje Skrypty wcześnie i może być użyte przed załadowaniem całej strony internetowej.

Jeśli skrypty zostaną wprowadzone w końcu Walidacja nastąpi dopiero po załadowaniu całych stylów i projektu, co nie jest doceniane w przypadku szybkich responsywnych stron internetowych.

 0
Author: Sanjeev S,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-27 06:12:19

Na końcu dokumentu HTML

, aby nie wpływało to na wczytywanie dokumentu HTML w przeglądarce w momencie wykonania.

 0
Author: Mr_Blue,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-27 14:49:19

Skrypty mogą być umieszczone w sekcji strony HTML lub w obu.

<head>
<script></script>
</head>
or here
<body>
<script></script>
</body>

Ale dla najlepszych praktyk, aby zignorować każdy błąd należy umieścić między znacznikiem body, ponieważ jeśli jakiś problem odkryć w javascript, html nie być stop pracy, ale jeśli ty, ale między znacznikiem nagłówka jeśli jakiś problem odkryć, że zatrzyma pracę strony

Blockquote

 0
Author: Mohamed Elshahawy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-22 22:50:54

Dla mnie bardziej sensowne jest umieszczenie skryptu po HTML. Ponieważ przez większość czasu muszę załadować Dom przed wykonaniem skryptu. Mógłbym umieścić go w znaczniku head, ale nie podoba mi się cały dokument ładujący słuchacza nad głową. Chcę, aby mój kod był krótki, słodki i łatwy do odczytania.

Słyszałem, że stare wersje safari były quarky podczas dodawania skryptu poza tagiem head, ale mówię, kogo to obchodzi. Nie znam nikogo używającego tego starego gówna.

Dobre pytanie przez sposób.

 -2
Author: zachdyer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-29 06:06:02

Możesz umieścić tam, gdzie chcesz skrypty i jeden nie jest lepszy niż inny trening.

Sytuacja wygląda następująco:

Ładowanie strony liniowo, "top-down", więc jeśli umieścisz skrypt w głowie zapewnia, że zacznie się ładować przed wszystkim, teraz, jeśli umieścisz go wewnątrz ciała zmieszany z kodem może spowodować ładowanie strony w nieestetyczny sposób.

Identyfikacja dobrych praktyk nie zależy od tego, gdzie.

Aby cię wesprzeć, wspomnę co następuje:

Możesz miejsce:

I 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 zostaną załadowane

Dobra praktyka tutaj będzie, kiedy wdroży każdy?

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

 -6
Author: Juan Miguel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-27 03:52:28