JavaScript na dole/górze strony?

Właśnie używałem wtyczki "Yslow" dla Mozilli Firefox i powiedział mi, że powinienem umieścić JavaScript na dole. Słyszałem to wcześniej, ale nie myślałem o tym zbyt wiele. Czy istnieje naprawdę zaleta umieszczania JavaScript na dole strony internetowej w porównaniu do góry?

Author: Peter Mortensen, 2009-10-28

8 answers

To pozwoli stronie internetowej załadować się w sposób widoczny przed wykonaniem JavaScript, co ma sens dla rzeczy takich jak Google Analytics, które nie muszą się zdarzyć przed załadowaniem strony.

Możesz również zajrzeć do rzeczy takich jak jQuery, prototype, itp. i dołączyć do" ready " handler, który wykonuje kod JavaScript po pełnym załadowaniu DOM, co jest odpowiednim miejscem dla wielu kodu JavaScript.

 50
Author: wojo,
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-10-28 17:12:31

Zakładając, że nie korzystasz z CDN lub nie obsługujesz JS z oddzielnej sub-domeny lub serwera, ładuje się synchronicznie i wymusza, aby zawartość HTML czekała, aż pobierze pliki. Umieszczając JS na dole strony przed zamknięciem znacznika </body>, zezwalasz na przetwarzanie HTML przed załadowaniem javascript. daje to efekt krótszego czasu ładowania strony.

 43
Author: Corey Ballou,
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-10-25 14:46:22

Jeśli masz statyczną zawartość html i dużo javascript, może to zmienić postrzegany czas ładowania strony, ponieważ html załaduje się najpierw dając użytkownikowi coś do oglądania. Jeśli nie masz dużo javascript, lub istniejąca zawartość strony opiera się na javascript, aby być użytecznym, to nie jest to tak przydatne praktycznie-mówiąc.

 5
Author: Brian Moeskau,
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-10-28 17:13:25

Chcę wprowadzić aktualizację do tego tematu, google niedawno wprowadził async snipped http://support.google.com/analytics/bin/answer.py?hl=en&answer=1008080&rd=1 , które można dodać dla Twojej witryny, aby zapewnić np. obsługę statystyk google. Powinien być umieszczony na dole <head> sekcji dla najlepszej wydajności. Chodzi o to, że Zwiększa to prawdopodobieństwo wysłania nadajnika śledzącego przed opuszczeniem strony przez użytkownika.

Również powinien się tam znajdować, jeśli chcesz zweryfikować swoją stronę w Narzędziach dla webmasterów google za pomocą google analytics.

Poza tym nadal obowiązują te same zasady-javascript na dole dla "szybkiego" ładowania strony. Użyłem cudzysłowów, ponieważ nie liczę strony w pełni załadowanej, dopóki javascript się nie skończy; -)

 4
Author: Mauno Vähä,
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-08-21 18:43:36

Tak, strona załaduje zawartość i wyrenderuje ją przed załadowaniem i wykonaniem javascript, a w rezultacie strona ładuje się szybciej.

 3
Author: CodeJoust,
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-10-28 17:10:40

Pozwala na pełne załadowanie wszystkich elementów DOM przed załadowaniem Javascript, który je adresuje. Standard ten jest również częścią Visual Studio.

 0
Author: Umar AlFarooq,
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-04-18 18:00:56

Umieszczenie skryptów na dole elementu poprawia szybkość wyświetlania, ponieważ kompilacja skryptów spowalnia wyświetlanie.

 0
Author: Aakriti Kishore,
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-06-08 12:14:55

TOP

Po umieszczeniu kodu JavaScript na górze strony, przeglądarka rozpocznie ładowanie plików JS przed znacznikami, obrazami i tekstem. A ponieważ przeglądarki ładują JavaScript synchronicznie, nic innego nie ładuje się podczas ładowania JavaScript. Więc nie będzie przedział czasowy kilku sekund, gdzie użytkownik zobaczy pustą stronę, podczas gdy JavaScript jest ładowanie.

BOTTOM

Z drugiej strony, jeśli umieścisz swój JavaScript na dole strony użytkownik zobaczy najpierw ładowanie strony, a następnie JavaScript załaduje się w tle. Jeśli więc, na przykład, twój CSS i HTML trwa 5 sekund, a Twój JavaScript trwa kolejne 5 sekund, umieszczenie naszego JavaScript na górze strony da użytkownikowi "postrzegany" czas ładowania 10 sekund, a umieszczenie go na dole da" postrzegany " czas ładowania 5 sekund.

Wzięte z Demian Labs.

 0
Author: ivanleoncz,
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-09-10 19:45:19