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:
<script src="my.js" type="text/javascript" defer="defer"></script>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 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 .
<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.
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.
Źródła:
Ł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ć.
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 ...
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.
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.
@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
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.
Najlepiej zrobić to samemu.
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.