W prawie każdym przypadku najlepiej umieścić wszystkie odwołania do skryptu na końcu strony, tuż przed nią </body> .
Jeśli nie możesz tego zrobić ze względu na problemy związane z szablonami i tak dalej, udekoruj tagi skryptu deferatrybutem, aby przeglądarka wiedziała, że możesz pobrać skrypty po pobraniu HTML:
Istnieją pewne przypadki brzegowe jednak, gdzie może wystąpić migotanie strony lub inne artefakty podczas ładowania strony, które mogą być rozwiązane przez zazwyczaj po prostu umieszczając referencje skryptów jQuery w <head>tagu bez tej deferatrybutu. Te przypadki obejmują interfejs użytkownika jQuery i inne dodatki, takie jak jCarousel lub Treeview, które modyfikują DOM w ramach ich funkcjonalności.
Dalsze zastrzeżenia
Istnieje kilka bibliotek, które należy załadować przed DOM lub CSS, takich jak polypełniania. Modernizr to jedna z takich bibliotek, która musi być umieszczona w tagu head .
Rozważ to: themeforest.net/item/portfolious-professional-business-template/… . Jest to ostatnio kupiony przeze mnie motyw strony, który na swojej stronie głównej wykorzystuje jQuery z jCarousel. Kiedy przeniosłem bloki skryptu z głowy na koniec pliku, zauważyłem, że obrazy użyte w karuzeli będą wyświetlane jednocześnie podczas ładowania strony, podczas gdy gdy pliki skryptów były w głowie, strona ładowałaby się płynniej.
Chad Levy,
5
Użyj CSS, aby ustawić początkowy stan zawartości. CSS powinien przejść do głowy. Złamanie czegoś, aby coś innego zadziałało, nie jest rozwiązaniem. Jeśli odwiedzający musi czekać na załadowanie jQuery i wszystkich powiązanych wtyczek przed wyświetleniem jakiejkolwiek treści, może nie zostać wystarczająco długo, aby ją zobaczyć.
Duncan
9
ChadLevy ma rację: są pewne warunki, w których wtyczki jQuery działają lepiej, jeśli są wymienione w pliku <head>. Jeśli twoje znaczniki zależą od tego, czy wtyczka jQuery sortuje dla ciebie zawartość, nie ma sensu umieszczanie odnośnika do wtyczki na dole strony, ponieważ będziesz mieć funky znaczniki na swojej stronie internetowej, dopóki wtyczki się nie załadują. Reguł należy przestrzegać, aż przestaną działać, w którym to momencie reguły powinny zostać złamane.
Robert Harvey
2
@ Duncan: Idealnie byłoby to w przypadku, gdy można kontrolować wszystkie zależności. JQuery (a dokładniej jQuery UI i inne dodatki) polega na tym, że z założenia nie można mieć pełnej kontroli nad ich funkcjonalnością, więc dodanie czegoś takiego jak atrybuty widoczności do elementu DOM, aby ładował się bardziej płynnie, może nie być możliwe, jeśli dodatek wykorzystujący ten element nie będzie uwzględniał wspomnianego atrybutu. Czasami lepiej jest przeciwstawić się prostej konwencji niż próbować uzyskać zależność, aby działała tak, jak chcesz.
Chad Levy,
2
@Stefan: Jeśli twoje wtyczki jQuery nie mogą manipulować DOM, to po co?
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. W niektórych sytuacjach przenoszenie skryptów na dół nie jest łatwe. Jeśli na przykład skrypt używa document.write do wstawiania części zawartości strony, nie można jej przenieść niżej na stronie. Mogą również występować problemy z określaniem zakresu. W wielu przypadkach istnieją sposoby obejścia tych sytuacji.
Alternatywną często pojawiającą się sugestią jest stosowanie odroczonych skryptów. Atrybut DEFER wskazuje, że skrypt nie zawiera 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 skrypt może zostać odroczony, ale nie w stopniu wymaganym. Jeśli skrypt można odroczyć, można go również przenieść na dół strony. To przyspieszy ładowanie stron internetowych.
EDYCJA: Firefox obsługuje atrybut DEFER od wersji 3.6.
Widziałem kilka nowoczesnych rad, które mówią, że skrypty powinny być umieszczone na górze. Umieszczenie skryptów na dole pozwala na równoległe ładowanie obrazów i innych treści w treści strony, ale skutecznie powoduje, że skrypty na stronie ładują się później - całe ciało HTML musi zostać pobrane, zanim przeglądarka się dowie o adresy URL skryptu do załadowania. Większość ludzi odwołuje się do przewodnika Yahoo, który nie jest już dokładny - Firefox rzeczywiście honoruje odroczone atrybuty skryptów. Odroczenie u góry spowoduje szybsze ładowanie strony, jeśli ją zmierzysz.
ShadowChaser
Czy za pomocą tej metody mogę zobaczyć statystyki dotyczące prędkości ładowania strony?
Aktualizacja: od początku / połowy 2016 r. Wszystkie nowoczesne przeglądarki zwiększyły liczbę połączeń na nazwę hosta do co najmniej 6.
Night Owl
32
Ładuj jQuery tylko do głowy, oczywiście przez CDN.
Czemu? W niektórych scenariuszach możesz dołączyć częściowy szablon (np. Fragment formularza logowania do ajax) z osadzonym kodem zależnym od jQuery; jeśli jQuery jest ładowane na dole strony, pojawia się błąd „$ nie jest zdefiniowany”, dobrze.
Istnieją oczywiście sposoby na obejście tego (na przykład nie osadzanie żadnego JS i dołączanie do pakietu js load-at-bottom), ale po co tracić swobodę leniwie ładowanego js, możliwości umieszczania kodu zależnego od jQuery w dowolnym miejscu ? Silnik Javascript nie dba o to, gdzie kod mieszka w DOM, o ile spełnione są zależności (np. Ładowane jQuery).
Tak, umieść je wcześniej dla swoich wspólnych / wspólnych plików js </body> dla , ale z wyjątkiem wyjątków, gdzie naprawdę sensowne jest utrzymanie aplikacji pod przykrywką jQuery lub odnośnikiem do pliku w tym miejscu w html, zrób to.
W głowie nie ma żadnej wydajności, która ładuje jquery; jaka przeglądarka na tej planecie nie ma już pliku CDN jQuery w pamięci podręcznej?
Dużo gadania o niczym, wbij jQuery w głowę i pozwól swojej wolności rządzić.
wiele przeglądarek tego nie robi; około 2% to najwyższa wartość, jaką przeczytałem, biorąc pod uwagę wersję, a fakt, że buforowanie opiera się na dokładnych nazwach zasobów, więc jquery1.4.2 to nie to samo co jquery1.7, 1.9.1 lub… .
Toni Leigh
Z tych 2%, powiedzmy, połowa wyjdzie, zanim strona załaduje się po raz pierwszy. W ten sposób tracisz 1%odwiedzających, ale potencjalnie oszczędzasz sobie dużo czasu i problemów programistycznych. Sprawdź, czy ma to sens w przypadku twojego modelu biznesowego ...
osa,
13
Nimbuz zapewnia bardzo dobre wyjaśnienie tego problemu, ale myślę, że ostateczna odpowiedź zależy od twojej strony: co jest ważniejsze, aby użytkownik miał wcześniej - skrypty lub obrazy?
Niektóre strony nie mają sensu bez obrazów, ale zawierają jedynie drobne, nieistotne skrypty. W takim przypadku sensowne jest umieszczenie skryptów na dole, aby użytkownik mógł zobaczyć obrazy wcześniej i zacząć rozumieć stronę. Inne strony działają w oparciu o skrypty. W takim przypadku lepiej jest mieć działającą stronę bez obrazów niż niedziałającą stronę z obrazami, więc warto umieścić skrypty na górze.
Inną rzeczą do rozważenia jest to, że skrypty są zwykle mniejsze niż obrazy. Oczywiście jest to uogólnienie i musisz sprawdzić, czy dotyczy twojej strony. Jeśli tak się stanie, to dla mnie jest to argument za postawieniem ich na pierwszym miejscu (tzn. Chyba że istnieje dobry powód, aby zrobić inaczej), ponieważ nie opóźnią obrazów tak bardzo, jak obrazy opóźnią skrypty. Wreszcie, o wiele łatwiej jest mieć skrypt na górze, ponieważ nie musisz się martwić, czy są one jeszcze załadowane, kiedy musisz ich użyć.
Podsumowując, domyślnie umieszczam skrypty na górze i zastanawiam się tylko, czy warto przenieść je na dół po ukończeniu strony. To optymalizacja - i nie chcę tego robić przedwcześnie.
Miałeś mnie, dopóki nie wyciągnąłeś przedwczesnego argumentu optymalizacji. To tylko kolejna zasada, którą ludzie przestrzegają dogmatycznie, nie do końca rozumiejąc jej konsekwencje.
Robert Harvey
6
No cóż, nie mogę wygrać ich wszystkich! Jestem przekonany, że rozumiem jego konsekwencje. :)
EMP
Nie jestem pewien, czy musisz się martwić, jeśli twoje skrypty zostały załadowane. Renderowanie bloków do momentu załadowania skryptu, na tym właśnie polega większość tej dyskusji. Tak długo, jak nic nie zadzwonisz przed załadowaniem, nic ci nie jest. Poza tym do tego służą wywołania zwrotne i tak naprawdę nie powinieneś osadzać wiele więcej na swojej stronie. Jak rozumiem, obrazy nie blokują się (ładują się równolegle), w rzeczywistości DOM może być gotowy, a twoje skrypty uruchomione przed załadowaniem obrazów. Nie ma sensu umieszczać skryptów na pierwszym miejscu, aby uniknąć ich zablokowania.
Duncan
4
Biorąc pod uwagę, że ogólną zgodą jest umieszczanie skryptów na samym dole, czy nie byłoby lepiej robić tego domyślnie i przenosić je na górę tylko w przypadku problemów? Dziwne jest robić rzeczy wstecz. Czasami lepiej jest zrobić optymalną rzecz, jeśli nie ma różnicy w wydatku wysiłku :)
Duncan
@ Duncan, tak, to było moje podejście. Umieszczam wtyczki na dole, a kiedy miałem problemy, umieszczam je na górze, a to naprawia problemy.
Robert Harvey
6
Większość kodu jquery jest wykonywana na gotowym dokumencie, co zresztą dzieje się dopiero na końcu strony. Ponadto renderowanie strony może być opóźnione przez parsowanie / wykonywanie javascript, dlatego najlepszym rozwiązaniem jest umieszczenie całego javascript na dole strony.
Standardową praktyką jest umieszczanie wszystkich skryptów na dole strony, ale używam ASP.NET MVC z wieloma wtyczkami jQuery, i stwierdzam, że wszystko działa lepiej, jeśli umieszczę moje skrypty jQuery w <head>sekcji master strona.
W moim przypadku istnieją artefakty, które pojawiają się podczas ładowania strony, jeśli skrypty znajdują się na dole strony. Korzystam z wtyczki jQuery TreeView, a jeśli skrypty nie zostaną załadowane na początku, drzewo będzie renderowane bez wymaganych klas CSS narzuconych przez wtyczkę. Otrzymujesz ten zabawnie wyglądający bałagan, gdy strona ładuje się po raz pierwszy, a następnie poprawnie renderuje TreeView. Bardzo źle wygląda. Umieszczenie wtyczek jQuery w <head>sekcji strony wzorcowej eliminuje ten problem.
Intranety nie podlegają takim samym warunkom jak Internet, więc opóźnienie ładowania jest prawdopodobnie mniej zauważalne. Jednak nadal zaleca się przestrzeganie zasad.
Duncan
nie, umieszczenie identyfikatorów / stylów CSS w znacznikach (zamiast czekania, aż jQuery zrobi to na DOM) rozwiązuje problem.
Dan Beam
1
@Dan Beam: Treeview jest wypełniany z tabeli bazy danych, a style Treeview są ustawiane przez wtyczkę Treeview na podstawie zawartości tabeli, więc nie, to nie zadziała.
Robert Harvey
1
Dlaczego miałbym to zrobić, skoro mogę po prostu umieścić niezmodyfikowany skrypt wtyczki Treeview na górze strony, a to zadziała dobrze? To nie ma sensu, Dan.
Robert Harvey
1
Pozdrawiam Robert, używam również ASP.NETMVC z formularzami w częściach. Sensowne jest trzymanie javascript w częściowym, ponieważ nowe pola są przypisywane do ich funkcji za każdym razem, gdy częściowa jest wykonywana (powiedzmy do walidacji). Mam do czynienia z tym problemem tylko przy próbie użycia @Html.Action, która dynamicznie zapisuje wynik na wyjściu, ponieważ moja częściowa daje $ is undefinedznaczenie, że zamiast tego muszę użyć .load ('@ Url.Action'), aby załadować częściową. Ale to daje fouc ze względu na dodatkową prośbę. Na podstawie twoich danych wprowadzę jquery nad RenderBody () na mojej stronie wzorcowej
Malkin
4
Chociaż prawie wszystkie strony internetowe wciąż umieszczają Jquery i inne javascript w nagłówku: D, nawet sprawdź stackoverflow.com.
Sugeruję również, abyś założył przed końcową metkę ciała. Możesz sprawdzić czas ładowania po umieszczeniu w obu miejscach. Tag skryptu spowoduje wstrzymanie ładowania strony.
a po umieszczeniu javascript w stopce możesz uzyskać nietypowy wygląd strony, dopóki nie załaduje javascript, więc umieść css w sekcji nagłówka.
Tuż przed </body>jest najlepsze miejsce według Yahoo Developer Network „s Dobrych Praktyk dla przyspieszenia swojej stronie internetowej link , ma sens.
Dla mnie jQuery jest trochę wyjątkowy. Może wyjątek od normy. Jest tak wiele innych skryptów, które na nim polegają, więc bardzo ważne jest, aby ładował się wcześnie, aby inne skrypty później działały zgodnie z przeznaczeniem. Jak ktoś zauważył, nawet ta strona ładuje jQuery w sekcji head.
Odpowiedzi:
Wszystkie skrypty powinny być ładowane na końcu
W prawie każdym przypadku najlepiej umieścić wszystkie odwołania do skryptu na końcu strony, tuż przed nią
</body>.Jeśli nie możesz tego zrobić ze względu na problemy związane z szablonami i tak dalej, udekoruj tagi skryptu
deferatrybutem, aby przeglądarka wiedziała, że możesz pobrać skrypty po pobraniu HTML:Skrzynie na brzeg
Istnieją pewne przypadki brzegowe jednak, gdzie może wystąpić migotanie strony lub inne artefakty podczas ładowania strony, które mogą być rozwiązane przez zazwyczaj po prostu umieszczając referencje skryptów jQuery w
<head>tagu bez tejdeferatrybutu. Te przypadki obejmują interfejs użytkownika jQuery i inne dodatki, takie jak jCarousel lub Treeview, które modyfikują DOM w ramach ich funkcjonalności.Dalsze zastrzeżenia
Istnieje kilka bibliotek, które należy załadować przed DOM lub CSS, takich jak polypełniania. Modernizr to jedna z takich bibliotek, która musi być umieszczona w tagu head .
źródło
<head>. Jeśli twoje znaczniki zależą od tego, czy wtyczka jQuery sortuje dla ciebie zawartość, nie ma sensu umieszczanie odnośnika do wtyczki na dole strony, ponieważ będziesz mieć funky znaczniki na swojej stronie internetowej, dopóki wtyczki się nie załadują. Reguł należy przestrzegać, aż przestaną działać, w którym to momencie reguły powinny zostać złamane.Umieść skrypty na dole
EDYCJA: Firefox obsługuje atrybut DEFER od wersji 3.6.
Źródła:
źródło
Ładuj jQuery tylko do głowy, oczywiście przez CDN.
Czemu? W niektórych scenariuszach możesz dołączyć częściowy szablon (np. Fragment formularza logowania do ajax) z osadzonym kodem zależnym od jQuery; jeśli jQuery jest ładowane na dole strony, pojawia się błąd „$ nie jest zdefiniowany”, dobrze.
Istnieją oczywiście sposoby na obejście tego (na przykład nie osadzanie żadnego JS i dołączanie do pakietu js load-at-bottom), ale po co tracić swobodę leniwie ładowanego js, możliwości umieszczania kodu zależnego od jQuery w dowolnym miejscu ? Silnik Javascript nie dba o to, gdzie kod mieszka w DOM, o ile spełnione są zależności (np. Ładowane jQuery).
Tak, umieść je wcześniej dla swoich wspólnych / wspólnych plików js
</body>dla , ale z wyjątkiem wyjątków, gdzie naprawdę sensowne jest utrzymanie aplikacji pod przykrywką jQuery lub odnośnikiem do pliku w tym miejscu w html, zrób to.W głowie nie ma żadnej wydajności, która ładuje jquery; jaka przeglądarka na tej planecie nie ma już pliku CDN jQuery w pamięci podręcznej?
Dużo gadania o niczym, wbij jQuery w głowę i pozwól swojej wolności rządzić.
źródło
2%, powiedzmy, połowa wyjdzie, zanim strona załaduje się po raz pierwszy. W ten sposób tracisz1%odwiedzających, ale potencjalnie oszczędzasz sobie dużo czasu i problemów programistycznych. Sprawdź, czy ma to sens w przypadku twojego modelu biznesowego ...Nimbuz zapewnia bardzo dobre wyjaśnienie tego problemu, ale myślę, że ostateczna odpowiedź zależy od twojej strony: co jest ważniejsze, aby użytkownik miał wcześniej - skrypty lub obrazy?
Niektóre strony nie mają sensu bez obrazów, ale zawierają jedynie drobne, nieistotne skrypty. W takim przypadku sensowne jest umieszczenie skryptów na dole, aby użytkownik mógł zobaczyć obrazy wcześniej i zacząć rozumieć stronę. Inne strony działają w oparciu o skrypty. W takim przypadku lepiej jest mieć działającą stronę bez obrazów niż niedziałającą stronę z obrazami, więc warto umieścić skrypty na górze.
Inną rzeczą do rozważenia jest to, że skrypty są zwykle mniejsze niż obrazy. Oczywiście jest to uogólnienie i musisz sprawdzić, czy dotyczy twojej strony. Jeśli tak się stanie, to dla mnie jest to argument za postawieniem ich na pierwszym miejscu (tzn. Chyba że istnieje dobry powód, aby zrobić inaczej), ponieważ nie opóźnią obrazów tak bardzo, jak obrazy opóźnią skrypty. Wreszcie, o wiele łatwiej jest mieć skrypt na górze, ponieważ nie musisz się martwić, czy są one jeszcze załadowane, kiedy musisz ich użyć.
Podsumowując, domyślnie umieszczam skrypty na górze i zastanawiam się tylko, czy warto przenieść je na dół po ukończeniu strony. To optymalizacja - i nie chcę tego robić przedwcześnie.
źródło
Większość kodu jquery jest wykonywana na gotowym dokumencie, co zresztą dzieje się dopiero na końcu strony. Ponadto renderowanie strony może być opóźnione przez parsowanie / wykonywanie javascript, dlatego najlepszym rozwiązaniem jest umieszczenie całego javascript na dole strony.
źródło
Standardową praktyką jest umieszczanie wszystkich skryptów na dole strony, ale używam ASP.NET MVC z wieloma wtyczkami jQuery, i stwierdzam, że wszystko działa lepiej, jeśli umieszczę moje skrypty jQuery w
<head>sekcji master strona.W moim przypadku istnieją artefakty, które pojawiają się podczas ładowania strony, jeśli skrypty znajdują się na dole strony. Korzystam z wtyczki jQuery TreeView, a jeśli skrypty nie zostaną załadowane na początku, drzewo będzie renderowane bez wymaganych klas CSS narzuconych przez wtyczkę. Otrzymujesz ten zabawnie wyglądający bałagan, gdy strona ładuje się po raz pierwszy, a następnie poprawnie renderuje TreeView. Bardzo źle wygląda. Umieszczenie wtyczek jQuery w
<head>sekcji strony wzorcowej eliminuje ten problem.źródło
@Html.Action, która dynamicznie zapisuje wynik na wyjściu, ponieważ moja częściowa daje$ is undefinedznaczenie, że zamiast tego muszę użyć .load ('@ Url.Action'), aby załadować częściową. Ale to daje fouc ze względu na dodatkową prośbę. Na podstawie twoich danych wprowadzę jquery nad RenderBody () na mojej stronie wzorcowejChociaż prawie wszystkie strony internetowe wciąż umieszczają Jquery i inne javascript w nagłówku: D, nawet sprawdź stackoverflow.com.
Sugeruję również, abyś założył przed końcową metkę ciała. Możesz sprawdzić czas ładowania po umieszczeniu w obu miejscach. Tag skryptu spowoduje wstrzymanie ładowania strony.
a po umieszczeniu javascript w stopce możesz uzyskać nietypowy wygląd strony, dopóki nie załaduje javascript, więc umieść css w sekcji nagłówka.
źródło
Tuż przed
</body>jest najlepsze miejsce według Yahoo Developer Network „s Dobrych Praktyk dla przyspieszenia swojej stronie internetowej link , ma sens.Najlepiej zrobić to samemu.
źródło
Dla mnie jQuery jest trochę wyjątkowy. Może wyjątek od normy. Jest tak wiele innych skryptów, które na nim polegają, więc bardzo ważne jest, aby ładował się wcześnie, aby inne skrypty później działały zgodnie z przeznaczeniem. Jak ktoś zauważył, nawet ta strona ładuje jQuery w sekcji head.
źródło