Gdzie umieścić JavaScript w pliku HTML?

210

Powiedzmy, że mam dość duży plik JavaScript, spakowany do około 100 KB. Przez plik rozumiem, że jest to plik zewnętrzny, do którego można się połączyć <script src="...">, a nie wkleić w samym HTML.

Gdzie najlepiej umieścić to w kodzie HTML?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

Czy będzie jakaś różnica funkcjonalna między każdą z opcji?

javascript html optimization pseudonim
źródło
Możliwy duplikat Gdzie należy umieścić tagi <script> w znacznikach HTML?
Ivar

Odpowiedzi:

175

The Yahoo! Zespół wyjątkowej wydajności zaleca umieszczanie skryptów na dole strony ze względu na sposób pobierania składników przez przeglądarki.

Oczywiście komentarz Leviego „tuż przed jego użyciem i nie wcześniej” jest naprawdę poprawną odpowiedzią, tzn. „To zależy”.

Walter Rumsby
źródło
4
Na przykład, jeśli masz zamiar robić wiele rzeczy związanych z jQuery, musisz załadować bibliotekę, zanim spróbujesz z niej skorzystać.
BryanH
58
Powodem, dla którego Yahoo EPT zaleca umieszczenie JS na dole, jest to, że przeglądarka musi przejść w tryb jednowątkowy, podczas gdy JS ładuje się, a następnie wykonuje. Jeśli skrypt znajduje się w nagłówku lub w środku zawartości, przeglądarka „wstrzyma się”, gdy zajmuje się JS. Umieszczając JS na dole, zawartość zostanie załadowana i ogólnie widoczna, aby użytkownik mógł rozpocząć czytanie, gdy przeglądarka nadal zajmuje się JS.
BryanH
1
Cześć. Czy umieszczamy taki kod $(function () {...})również na dole strony, czy też musi on znajdować się w środku <head>?
Thang Pham
7
Mam nadzieję, że odwołanie się do „dolnej części strony” nie wykracza poza to </body>?
Mr_Green
1
Nowoczesne przeglądarki mogą również odczytać atrybut „odroczenia”. Możesz ustawić defer = "defer" na znacznikach skryptów, które nie znajdują się na dole <body>, a gdy przeglądarka je zobaczy, najpierw skończy ładować resztę HTML, a następnie wróci i zinterpretuje zawartość tag skryptu. Jest to pomocne, jeśli używasz jakiegoś frameworka, w którym nie masz pełnej kontroli nad stroną. Zagłęb się w ten artykuł i zauważ, że jest to żywy dokument, więc niektóre informacje są nieaktualne: stackoverflow.com/questions/5250412/...
LinuxDisciple 22.09.16
75

Najlepszym miejscem na to jest tuż przed jego użyciem i nie wcześniej.

Ponadto, w zależności od fizycznej lokalizacji użytkowników, korzystanie z usługi takiej jak usługa Amazon S3 może pomóc użytkownikom pobrać ją z serwera fizycznie bliższego niż serwer.

Czy twój skrypt js jest powszechnie używaną biblioteką, taką jak jQuery lub prototyp? Jeśli tak, istnieje wiele firm, takich jak Google i Yahoo, które dysponują narzędziami do udostępniania tych plików w sieci rozproszonej.

Levi Rosol
źródło
60

Zasadniczo najlepszym miejscem do umieszczania <script>tagów jest dół strony, tuż przed </body>tagiem. Coś takiego:

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

Czemu?

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. Więcej...

CSS

Trochę nie na temat, ale ... Umieść arkusze stylów na górze.

Podczas badania wydajności w Yahoo! Odkryliśmy, że przeniesienie arkuszy stylów do dokumentu HEAD sprawia, że ​​strony wydają się ładować szybciej. Wynika to z faktu, że umieszczanie arkuszy stylów w HEAD umożliwia stopniowe renderowanie strony. Więcej...

Dalsza lektura

Yahoo wydało naprawdę fajny przewodnik, w którym wymieniono najlepsze praktyki w celu przyspieszenia strony internetowej. Zdecydowanie warto przeczytać: https://developer.yahoo.com/performance/rules.html

martynas
źródło
1
„Problem spowodowany przez skrypty polega na tym, że blokują one równoległe pobieranie”. - To już nie jest prawda: w3.org/TR/html5/scripting-1.html#attr-script-async
Quentin
4

Przy 100k Javascript nie powinieneś nigdy umieszczać go w pliku. Użyj zewnętrznego pliku JavaScript skryptu. W piekle nie ma szans, że użyjesz takiej ilości kodu tylko na jednej stronie HTML. Prawdopodobnie pytasz, gdzie należy załadować plik JavaScript, ponieważ uzyskałeś już zadowalające odpowiedzi.

Chciałbym jednak zauważyć, że często nowoczesne przeglądarki akceptują pliki JavaScript gzip ped! Po prostu skompresuj x.jsplik x.js.gzi wskaż go w srcatrybucie. Nie działa na lokalnym systemie plików, do działania potrzebny jest serwer WWW. Ale oszczędności w przesyłanych bajtach mogą być ogromne.

Z powodzeniem przetestowałem go w Firefox 3, MSIE 7, Opera 9 i Google Chrome. Najwyraźniej nie działa w ten sposób w Safari 3.

Aby uzyskać więcej informacji, zobacz ten post na blogu i kolejną bardzo starą stronę, która mimo wszystko jest przydatna, ponieważ wskazuje, że serwer internetowy może wykryć, czy przeglądarka akceptuje JavaScript spakowany gzipem, czy nie. Jeśli twoja strona serwera może dynamicznie wybrać wysyłanie gzipa lub zwykłego tekstu, możesz sprawić, że strona będzie dostępna we wszystkich przeglądarkach internetowych.

bart
źródło
8
Źle zrozumiałeś pytanie OP. Pytał, gdzie w kodzie HTML umieścić znacznik skryptu. Używał już zewnętrznego pliku, nie wprowadzając skryptu. Wprawdzie było to mniej jasne przed jego edycją pytania w kwietniu '09. Być może usunąć tę odpowiedź?
Mark Amery
@Leandro Myślę, że to dlatego, że ludzie nie zawsze pamiętają o faktycznym pytaniu, ale nadal uważają takie odpowiedzi za przydatne. Niemniej jednak ta odpowiedź jest przydatna, ale niekoniecznie istotna. Może lepiej działać, jeśli opis głosowania zawiera bardziej jednoznaczne sformułowanie, np. „Ta odpowiedź jest przydatna i odpowiednia”.
WynandB
1
W skrypcie JavaScript spakowanym gzipem: możesz tak skonfigurować serwer WWW, aby go również skompresował ... (Lub użyj czegoś takiego jak moduł / opcja gzip_static nginx) (i gunzip dla innych klientów), który powinien przynajmniej wysłać poprawny nagłówek typu zawartości, z kodowaniem oznaczonym jako gzip, prawdopodobnie zapewniającym jeszcze lepszą obsługę przeglądarki
Gert van den Berg
4

Umieszczenie javascript na górze wydaje się ładniejsze, ale funkcjonalnie lepiej jest po HTML. W ten sposób JavaScript nie będzie działał i nie będzie próbował odwoływać się do elementów HTML przed ich załadowaniem. Tego rodzaju problem często uwidacznia się dopiero po załadowaniu strony przez rzeczywiste połączenie internetowe, szczególnie powolne.

Możesz także spróbować dynamicznie załadować javascript, dodając element nagłówka z innego kodu javascript, chociaż ma to sens tylko wtedy, gdy nie używasz całego kodu przez cały czas.

Matthias Wandel
źródło
3

Za pomocą cuzillion możesz przetestować wpływ na ładowanie strony różnych umieszczeń tagów skryptu przy użyciu różnych metod: wbudowany, zewnętrzny, „tagi HTML”, „document.write”, „element JS DOM”, „iframe” i „eval XHR” . Zobacz pomoc w celu wyjaśnienia różnic. Może także testować arkusze stylów, obrazy i ramki iframe.

Sam Hasler
źródło
1

Odpowiedź zależy od tego, jak korzystasz z obiektów javascript. Jak już wskazano, ładowanie plików javascript w stopce zamiast w nagłówku z pewnością poprawia wydajność, ale należy zachować ostrożność, aby używane obiekty były inicjowane później niż w stopce. Jeszcze jednym sposobem jest załadowanie plików „js” umieszczonych w folderze, który będzie dostępny dla wszystkich plików.

GustyWind
źródło
0

Jak powiedzieli inni, najprawdopodobniej powinien znaleźć się w zewnętrznym pliku. Wolę dołączyć takie pliki na końcu <head />. Ta metoda jest bardziej przyjazna dla człowieka niż przyjazna dla maszyny, ale w ten sposób zawsze wiem, gdzie jest JS. Dołączanie plików skryptowych gdzie indziej (imho) nie jest tak czytelne.

Naprawdę musisz wyciskać każde ostatnie ms, więc prawdopodobnie powinieneś zrobić to, co mówi Yahoo.

Berserk
źródło
0

Skrypty powinny znajdować się na końcu znacznika body, ponieważ w ten sposób HTML zostanie przeanalizowany przez przeglądarkę i wyświetlony przed załadowaniem skryptów.

José Salgado
źródło
0

Odpowiedź na pytanie zależy. W tej sytuacji są 2 scenariusze i musisz dokonać wyboru na podstawie odpowiedniego scenariusza.

Scenariusz 1 - Skrypt krytyczny / Wymagany skrypt

Jeśli skrypt, którego używasz, jest ważny do załadowania strony internetowej, zaleca się umieszczenie go u góry dokumentu HTML, tj <head>. Niektóre przykłady obejmują - kod aplikacji, bootstrap, czcionki itp.

Scenariusz 2 - Mniej ważne / skrypty analityczne

Stosowane są również skrypty, które nie wpływają na widok strony. Takie skrypty zaleca się ładować po załadowaniu wszystkich ważnych segmentów. Odpowiedź na to będzie na dole dokumentu, tj. Na dole twojego <body>przed tagiem zamykającym. Niektóre przykłady obejmują - Google Analytics, hotjar itp.

Bonus - asynchronizacja / odroczenie

Możesz także powiedzieć przeglądarkom, że ładowanie skryptu może być wykonywane jednocześnie z innymi i może być ładowane na podstawie wyboru przeglądarki za pomocą argumentu defer / async w kodzie skryptu.

na przykład. <script async src="script.js"></script>

Praveen Thirumurugan
źródło
-1

Twoje linki javascript mogą dostać się do nagłówka lub na końcu tagu ciała, prawdą jest, że wydajność poprawia się poprzez umieszczenie linku na końcu tagu ciała, ale jeśli nie jest to problem, umieszczenie ich w głowie jest ładniejsze dla osób czytających i wiesz, gdzie znajdują się linki i możesz łatwiej do nich odwoływać.

Timothy Trousdale
źródło
-1

Powiedziałbym, że to zależy od tego, co planujesz osiągnąć dzięki kodowi JavaScript:

  • jeśli planujesz wstawić zewnętrzne skrypty JS, najlepsze miejsce znajduje się na początku strony
  • jeśli planujesz używać stron na smartfonach, to na dole strony, tuż przed tagiem.
  • ale jeśli planujesz stworzyć kombinację HTML i JS (na przykład dynamicznie tworzona i zapełniana tabela HTML), musisz umieścić ją tam, gdzie jest to potrzebne.
Ludus H.
źródło
Co powiedziałem, że zasługuję na minus !? Rany.
Ludus H
Co bycie zewnętrznym ma wspólnego z umieszczaniem skryptu w głowie? Dlaczego u dołu strony jest dobre miejsce do umieszczania skryptów specjalnie dla smartfonów? Twoje stwierdzenie o dynamicznym generowaniu HTML z JS jest prawdziwe tylko wtedy, gdy używasz document.write, co prawdopodobnie nie powinno być.
Quentin,
„Zakładałeś”, co myślałem, i dlatego, że moja odpowiedź dostała minus? Myślisz, że prawdopodobnie twoje domniemanie jest lepsze niż moje wyjaśnienie, prawda? Właśnie zaplanowałem krótkie wyjaśnienie, jeśli ktoś nie jest w stanie zrozumieć, poprosi o więcej informacji. W moim komentarzu zasugerowałem umieszczenie JS na końcu strony dla smartfonów i tabletów tuż przed końcem treści, ponieważ ładowanie całej strony jest szybsze, ponieważ przeglądarka nie musi przełączać się w tryb „pojedynczego wątku”, zawartość strony zacznie się pojawiać na ekranie ... ale zapewne o tym wiesz.
Ludus H