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

26

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?

DisgruntledGoat
źródło
Mam odwrotny problem. Mam skrypt, który tworzy i ustawia pasek boczny, ale niestety strona jest renderowana przed uruchomieniem mojego skryptu, co powoduje nieestetyczny szarpnięcie, ponieważ elementy strony są przerysowywane w nowych lokalizacjach. Czy można zablokować renderowanie, dopóki mój skrypt nie zostanie ukończony, lub w inny sposób uruchomić mój rozmiar i pozycję przed pierwszym renderowaniem?
3
Czy to pytanie nie należy bardziej do StackOverflow?
Marco Demaio

Odpowiedzi:

30

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.

Callan
źródło
6

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.

Macha
źródło
3

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.

Tomek
źródło
1
Nie do końca prawda. Skrypt może zmienić DOM przed załadowaniem całego HTML ... W rzeczywistości skrypty blokują, ponieważ mogą zmieniać stronę. To powiedziawszy, w wielu przypadkach programiści nie muszą dodawać skryptu „zachowania”, dopóki DOM nie zostanie załadowany.
scunliffe
1

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.

Kornel
źródło