Czy $ (dokument) .Jeśli konieczne jest umieszczenie wszystkich moich skryptów JavaScript na dole strony?

Question

Powiel możliwe:
jquery - Is $(document).ready necessary?

Umieszczenie JS tuż nad tagiem </body> poprawia postrzegane czasu ładowania, ponieważ przeglądarka nie trzeba czytać i analizować przez cały JS, zanim możliwe zacznij renderować stronę.

Ale ma inną zaletę, prawda? Nie musimy owijać JS w $(document).ready(function() { ... }), ponieważ wszystkie elementy są już nad JS i dlatego są gotowe do manipulacji.

1. Czy $(document).ready niezbędne do zapewnienia DOM pełni załadowany i jest gotowy do manipulacji?

2. Czy jest jakaś różnica między czasami wykonania? Czy jedna metoda zapłonie szybciej niż druga?

3. Czy możemy również połączyć nasze zewnętrzne pliki JS (<script src="..." />) u dołu strony, czy też musi to być nagłówek?

Answer 1

Ten SO odpowiedzi mówi NO:

stackoveflow question

$ (document) .ready jest dla zapewnienia pełnej DOM jest dostępny w momencie funkcja jest wywoływana. Wszelkie funkcje i zdarzenia niezależne od DOM nie muszą być wprowadzane do gotowego wydarzenia.

także - w celu poprawy strona szybkość renderowania - ładowanie plików JavaScript dynamicznie nieblokującą mody: http://berklee.github.com/nbl/ lub https://github.com/rgrove/lazyload/

Ta technika działa nieco jak poniżej:

var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.src = "file1.js"; 
document.getElementsByTagName("head")[0].appendChild(script); 

Ten nowy element ładuje źródło plik file1.js. Plik zaczyna się pobierać, gdy tylko element zostanie dodany do strony. Ważną rzeczą w tej technice jest to, że plik jest pobierany i uruchamiany bez blokowania innych procesów na stronie, niezależnie od miejsca rozpoczęcia pobierania. Możesz nawet umieścić ten kod w nagłówku dokumentu bez wpływu na resztę strony (oprócz jednego połączenia HTTP używanego do pobrania pliku).

ta książka: "High Performance JavaScript" autorstwa Nicolas Zakas ma wiele interesujących informacji o optymalizacji wydajności JavaScript.