Czy kod Jquery powinien znajdować się w nagłówku lub stopce?

Umieść Skrypty na dole

Problem powodowany przez skrypty polega na tym, że blokują pobieranie równoległe. Na Specyfikacja HTTP/1.1 sugeruje, że przeglądarki pobierają nie więcej niż dwie komponenty równolegle dla nazwy hosta. Jeśli podajesz swoje zdjęcia z wielu hostnames, można uzyskać więcej niż dwa pobieranie plików odbywa się równolegle. While skrypt pobiera jednak przeglądarka nie chce uruchomić żadnego innego pliki do pobrania, nawet na różnych hostnames. W w niektórych sytuacjach nie jest łatwe przenoszenie skryptów na dół. Jeśli np. skrypt używa dokument.napisz aby wstawić część zawartość strony, nie można jej przenieść niżej na stronie. Może być też problemy z Zasięgiem. W wielu przypadkach istnieje są sposoby na obejście tych sytuacje.

Alternatywna sugestia, która często pojawia się użycie skryptów odroczonych. Atrybut DEFER wskazuje, że skrypt nie zawiera dokument.pisać, i jest wskazówką do przeglądarki, które mogą kontynuować rendering. Niestety Firefox nie obsługuje atrybutu DEFER. W Internet Explorerze skrypt może być odroczone, ale nie tak bardzo jak pożądane. Jeśli skrypt może zostać odroczony, można go również przenieść na dno strona. Które sprawią, że Twoja sieć strony ładują się szybciej.

EDIT: Firefox obsługuje atrybut DEFER od wersji 3.6.

Źródła:

• http://www.w3schools.com/tags/att_script_defer.asp lub lepiej:
• http://caniuse.com/#feat=script-defer

Załaduj tylko samo jQuery do głowicy, oczywiście przez CDN.

Istnieją oczywiście sposoby obejścia tego problemu (takie jak nie osadzanie żadnego JS i dołączanie do pakietu load-at-bottom js), ale po co tracić swobodę leniwie załadowanego js, możliwości umieszczenia jQuery w zależności kod gdzie chcesz ? Silnik Javascript nie dba o to, gdzie kod mieszka w DOM tak długo, jak zależności (jak jQuery jest ładowany) są spełnione.

W przypadku wspólnych / współdzielonych plików js, tak, umieść je przed </body>, ale dla WYJĄTKÓW, gdzie naprawdę sensowne jest trzymanie zależnego od jQuery fragmentu lub odniesienia do pliku w tym miejscu w html, zrób to.

Nie ma żadnej wydajności wczytywania jquery do głowy; co przeglądarka na planecie nie ma już pliku jQuery CDN w pamięci podręcznej?

Much ado about nothing, stick jQuery in the head and let your js freedom króluje.

Nimbuz zapewnia bardzo dobre wyjaśnienie 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?

Są strony, które nie mają sensu bez obrazów, ale mają tylko drobne, nieistotne Skrypty. W takim przypadku sensowne jest umieszczanie skryptów na dole, aby użytkownik mógł szybciej zobaczyć obrazy i zacząć rozumieć stronę. Inne strony polegają na skryptach do pracy. W w takim przypadku lepiej mieć działającą stronę bez obrazów niż niedziałającą stronę z obrazami, więc sensowne jest umieszczanie skryptów na górze.

Kolejną rzeczą do rozważenia jest to, że skrypty są zazwyczaj mniejsze niż obrazy. Oczywiście jest to uogólnienie i musisz sprawdzić, czy dotyczy to twojej strony. Jeśli tak, to dla mnie jest to argument za umieszczeniem ich na pierwszym miejscu jako zasady (tj. chyba, że jest dobry powód, aby zrobić inaczej), ponieważ nie będą opóźniać zdjęć tak bardzo ponieważ obrazy opóźniłyby Skrypty. Wreszcie, o wiele łatwiej jest mieć skrypt na górze, ponieważ nie musisz się martwić o to, czy są jeszcze załadowane, gdy musisz ich użyć.

Podsumowując, domyślnie umieszczam Skrypty na górze i zastanawiam się tylko, czy warto przenieść je na dół po zakończeniu strony. To optymalizacja - i nie chcę tego robić przedwcześnie.

Większość kodu jquery jest wykonywana na gotowym dokumencie, co i tak nie zdarza się aż do końca strony. Co więcej, renderowanie strony może być opóźnione przez javascript parsowanie/wykonanie, więc najlepiej jest umieścić cały javascript na dole strony.

Standardową praktyką jest umieszczenie wszystkich skryptów na dole strony, ale używam ASP.NET MVC z wieloma wtyczkami jQuery i uważam, że wszystko działa lepiej, jeśli umieszczę moje Skrypty jQuery w sekcji <head> strony wzorcowej.

W moim przypadku są artefakty, które pojawiają się podczas ładowania strony, jeśli skrypty znajdują się na dole strony. Używam wtyczki jQuery TreeView i jeśli skrypty nie są ładowane na początku, drzewo będzie renderowane bez niezbędne klasy CSS nałożone na niego przez wtyczkę. Więc dostajesz ten śmiesznie wyglądający bałagan podczas pierwszego ładowania strony, a następnie prawidłowego renderowania widoku drzewa. Bardzo źle wyglądający. Umieszczenie wtyczek jQuery w sekcji <head> strony wzorcowej eliminuje ten problem.

Chociaż prawie wszystkie strony nadal umieszczają Jquery i inne javascript na nagłówku: D, nawet sprawdzić stackoverflow.com .

Sugeruję również, aby założyć przed końcem tag ciała. Możesz sprawdzić czas ładowania po umieszczeniu w obu miejscach. Znacznik Script zatrzyma Twoją stronę, aby załadować ją dalej.

I po umieszczeniu javascript w stopce, możesz uzyskać nietypowy wygląd swojej strony internetowej, dopóki nie załaduje javascript, więc umieść css w sekcji nagłówka.

Tuż przed </body> jest najlepsze miejsce według TEN link , to ma sens.

Dla mnie jQuery jest trochę wyjątkowy. Może wyjątek od normy. Istnieje tak wiele innych skryptów, które opierają się na nim, więc jego dość ważne, że ładuje się wcześnie, więc Inne skrypty, które przychodzą później będzie działać zgodnie z przeznaczeniem. Jak ktoś inny zauważył nawet ta strona ładuje jQuery w sekcji head.