Większość książek / artykułów o javascript i programowaniu stron internetowych mówi, że musisz umieścić CSS w tagu head, a javascript na dole strony.
Ale kiedy otwieram źródła html znanych witryn, takie jak ta jedna stackoverflow, stwierdzam, że umieszczają one pliki js w tagu head.
Jakie są zalety i wady obu podejść i kiedy ich używać?
Znalazłem inne pytanie dotyczące tego samego problemu: Gdzie mam zadeklarować pliki JavaScript używane na mojej stronie? W <head> </head> czy w pobliżu </body>?
Odpowiedzi:
Z najlepszych praktyk Yahoo w zakresie przyspieszania witryny sieci Web :
Problem powodowany przez skrypty polega na tym, że blokują równoległe pobieranie. Specyfikacja HTTP / 1.1 sugeruje, że przeglądarki pobierają nie więcej niż dwa komponenty równolegle na nazwę hosta. Jeśli udostępniasz swoje obrazy z wielu nazw hostów, możesz pobrać więcej niż dwa pliki równolegle. Jednak podczas pobierania skryptu przeglądarka nie rozpocznie żadnego innego pobierania, nawet w przypadku innych nazw hostów.
W niektórych sytuacjach nie jest łatwo przenieść skrypty na dół. Jeśli na przykład skrypt używa document.write do wstawienia części zawartości strony, nie można jej przenieść niżej na stronie. Mogą również wystąpić problemy z zakresem. W wielu przypadkach istnieją sposoby obejścia takich sytuacji.
Alternatywną sugestią, która często się pojawia, jest użycie odroczonych skryptów. Atrybut DEFER wskazuje, że skrypt nie zawiera pliku document.write i jest wskazówką dla przeglądarek, że mogą kontynuować renderowanie. Niestety, Firefox nie obsługuje atrybutu DEFER. W przeglądarce Internet Explorer wykonanie skryptu może zostać odroczone, ale nie tak bardzo, jak jest to pożądane. Jeśli skrypt można odroczyć, można go również przenieść na dół strony. Dzięki temu Twoje strony internetowe będą ładować się szybciej.
Dlatego ogólnie lepiej jest umieścić je na dole. Jednak nie zawsze jest to możliwe i często i tak nie robi to dużej różnicy.
Jak powiedzieli inni ludzie, umieszczenie javascript w głowie opóźnia renderowanie strony do czasu załadowania skryptów, co oznacza, że ładowanie strony może potrwać dłużej - szczególnie jeśli pobierasz duże pliki skryptów.
Jeśli przeniesiesz tagi skryptów na koniec strony, upewnisz się, że przeglądarka pobierze obrazy i arkusze stylów przed tagami skryptów, a strona prawdopodobnie zostanie wyrenderowana przed rozpoczęciem uruchamiania skryptów. Oznacza to również, że jeśli polegasz na niektórych funkcjach swoich skryptów, będzie to dostępne dopiero chwilę po tym, jak strona będzie widoczna dla użytkownika.
Jeśli dodajesz style lub elementy (itp. Przełączasz pola tekstowe za pomocą bogatszego edytora), będzie to widoczne dla użytkownika jako migotanie.
Jeśli dodajesz zdarzenia kliknięcia do elementów, będą one klikalne dopiero chwilę po tym, jak same elementy staną się widoczne.
Czasami te kwestie wymagają od nas umieszczenia skryptów w głowie, innym razem wystarczy przykleić je na dole.
IMHO (całkowicie przeciwko YSlow i wielu sprytnym ludziom) powinieneś trzymać swoje skrypty w tagu head i po prostu polegać na ich buforowaniu przez większość czasu.
Zasadniczo odniesienia do skryptów należy umieszczać na dole strony. Skrypty muszą nie tylko zostać pobrane, ale także ocenione i wykonane przed zwolnieniem bloku i kontynuacją procesu renderowania strony. Rzeczy takie jak Modernizr powinny być umieszczone na górze, ponieważ wykrywa niektóre funkcje, a także podkładki HTML5, które prawdopodobnie będziesz potrzebować.
Innym powodem, dla którego chcesz spróbować umieścić skrypty na dole strony, są pojedyncze punkty awarii lub SPOF. Jest to sytuacja, w której wywołanie skryptu przekracza limit czasu lub z innego powodu blokuje wykonanie strony. Może się to często zdarzyć w przypadku bibliotek reklamowych innych firm itp.
Tak, być może będziesz musiał pomyśleć trochę bardziej nad tym, jak zaprojektowałeś swoją aplikację, ale stwierdziłem, że bardzo szybko stało się to dla mnie bardzo naturalne. W ciągu ostatnich 4 lat stworzyłem setki aplikacji internetowych ze skryptem na dole i widzę różnicę. Może to 500 ms, może to 5000 ms, ale to wszystko ma znaczenie.
To naprawdę zależy od Twojej witryny. Jeśli uzyskujesz dostęp i wywołujesz funkcje JavaScript wewnątrz treści, należy odwołać się do niego w nagłówku, aby został załadowany. W przeciwnym razie, jeśli zamierzasz wywołać JavaScript tylko wtedy, gdy cały dokument jest załadowany, mądrze jest umieścić JavaScript na końcu treści. Umieszczając plik .JS na końcu, ładujesz całą stronę, a następnie pobierasz plik .JS. W ten sposób użytkownik będzie mógł szybko zobaczyć stronę i zanim się z nią zapozna, plik .JS zostanie już pobrany.
Każdy kod JavaScript w głowie zostanie sprawdzony przed załadowaniem strony, co oznacza, że ładowanie strony trwa dłużej. Nieco trudniej jest sprawić, aby zdarzenia działały poprawnie, jeśli cały javascript jest na końcu, ale jQuery prawie rozwiązuje ten problem za Ciebie.