Czy „umieszczanie Javascript na dole” już nie spełnia celu dokumentu..?

Wiem, że zalecane jest umieszczenie Javascript na dole strony, ale jeśli używam jQuery, czy nie jest to sprzeczne z celem jego działania podczas ładowania DOM?

Jeśli mam na przykład menu rozwijane, listy rozwijane nie będą wyświetlane, dopóki nie załaduje się cała reszta strony. Staram się również rozwijać z myślą o stopniowym ulepszaniu, więc mogę mieć elementy, które są ukryte w jQuery zamiast CSS (aby użytkownicy nie JS mogli je zobaczyć).

Czy może jest jakieś szczęśliwe medium?

Document.ready czeka na załadowanie DOM przed uruchomieniem jakiegokolwiek JavaScript (http://www.learningjquery.com/2006/09/introducing-document-ready).

Pomysł umieszczenia go na dole oznacza, że ​​jeśli twój JS ma problemy lub osoba ma wolne połączenie, reszta strony nadal ładuje się pierwsza i nie „zawiesza się”.

JS nadal działa, gdy wszystko się załaduje, czy to na początku, czy na końcu.

Umieszczenie javascript na dole oznacza, że ​​inna zawartość strony (szczególnie tekst) ładuje się przed javascript, więc użytkownicy nie czekają na załadowanie JS, jeśli mają wolne połączenia.

Nie wpływa to na document.ready, ponieważ jest to wywoływane, gdy przeglądarka zakończy przygotowywanie DOM dla strony. Tak czy inaczej, najpierw wszystko musi zostać załadowane.

Skrypt nie ma rzeczywistego zastosowania, dopóki HTML się nie załaduje - skrypt nie może zmienić DOM, dopóki HTML się nie załaduje. document.readyczeka na załadowanie DOM. Nie ma więc sensu, aby zawierał ważne rzeczy, takie jak arkusze stylów.

Umieść skrypty na dole strony (przed </body>tagiem), aby jak najszybciej dostarczyć użytkownikowi HTML i CSS. Przeglądarka będzie w stanie renderować stronę znacznie szybciej, a następnie można załadować skrypty, zamiast pozostawiać pustą stronę, na którą użytkownik będzie mógł patrzeć, czekając na pobranie skryptów.

Podczas gdy przeglądarka stopniowo renderuje stronę, jeśli trafi ona na znacznik skryptu (tj. Zewnętrzny plik Javascript) wszystko się zatrzymuje . Skrypty mają pierwszeństwo - podczas pobierania skryptu przeglądarka nie rozpocznie żadnego innego pobierania. tzn. obrazy i arkusze stylów oraz wszelkie inne równoległe pobieranie będą blokowane, nawet na różnych nazwach hostów.

Wadą umieszczania skryptów na dole strony jest to, że ponieważ strona będzie renderowana przed zainicjowaniem skryptów, szczególnie szybkie kliknięcia będą mogły wchodzić w interakcje z witryną, zanim JavaScript będzie gotowy.

Uwaga: Odwrotna sytuacja dotyczy arkuszy stylów - arkusze stylów w dolnej części strony blokują renderowanie progresywne, dopóki wszystkie arkusze stylów nie zostaną pobrane i przeniesienie ich do dokumentu HEADwyeliminuje problem.

Jest ładna sztuczka w celu załadowania javascript bez zmuszania użytkownika do oczekiwania, możesz utworzyć <script/>element za pomocą createElement()metody DOM i dodać go do strony tuż przed </body>tagiem zamykającym :

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

Przeglądarka nie rozpoczyna pobierania skryptu js, dopóki nowy <script/>element nie zostanie faktycznie dodany do strony. Po zakończeniu pobierania przeglądarka interpretuje zawarty w nim kod JavaScript.

Tak. Jeśli umieścisz skrypty na dole, doc.ready( DOMContentLoadedzdarzenie) nie jest już potrzebne - skrypt zostanie wykonany po załadowaniu wszystkich poprzedzających DOM.

Ponieważ skrypty na końcu poprawiają wydajność (parsowanie HTML i ładowanie CSS i obrazów nie jest blokowane przez skrypty), zalecam umieszczanie skryptów na dole zamiast ich używania doc.ready.