$ (dokument) .ready (funkcja () {}); vs skrypt na dole strony

Odpowiedzi:

142

Sam w sobie bardzo niewiele, tak czy inaczej DOM będzie gotowy do pracy (denerwowałem się tym, dopóki nie przeczytałem tego z Google ). Jeśli użyjesz sztuczki końca strony, twój kod może zostać wywołany najdrobniej, najmniej trochę wcześniej, ale nie będzie to miało znaczenia. Ale co ważniejsze, ten wybór dotyczy miejsca, w którym łączysz swój JavaScript ze stroną.

Jeśli umieścisz scripttag w tagu headi na którym polegasz ready, przeglądarka napotka Twój scripttag, zanim cokolwiek wyświetli użytkownikowi. W normalnym toku zdarzeń przeglądarka zatrzymuje się z piskiem i pobiera skrypt, uruchamia interpreter JavaScript i przekazuje mu skrypt, a następnie czeka, aż interpreter przetwarza skrypt (a następnie jQuery patrzy na różne sposoby aby DOM był gotowy). (Mówię „w normalnym toku”, ponieważ niektóre przeglądarki obsługują atrybuty asynclubdefer w scripttagach).

Jeśli umieścisz swój scripttag na końcu bodyelementu, przeglądarka nie zrobi tego wszystkiego, dopóki Twoja strona w dużej mierze nie zostanie już wyświetlona użytkownikowi. Poprawia to postrzegany czas wczytywania Twojej strony.

Aby uzyskać najlepszy postrzegany czas wczytywania, umieść skrypt na dole strony. (Jest to również wskazówka od ludzi z Yahoo ). A jeśli masz zamiar to zrobić, nie ma potrzeby korzystania ready, chociaż oczywiście możesz, jeśli chcesz.

Ma to jednak swoją cenę: musisz mieć pewność, że rzeczy, które użytkownik widzi, są gotowe do interakcji. Przesuwając czas pobierania do momentu, w którym strona jest w większości wyświetlana, zwiększasz możliwość rozpoczęcia interakcji użytkownika ze stroną przed załadowaniem skryptu. To jeden z argumentów przemawiających za umieszczeniem scripttagu na końcu. Często nie stanowi to problemu, ale musisz spojrzeć na swoją stronę, aby zobaczyć, czy tak jest, a jeśli tak, jak chcesz sobie z tym poradzić. (Możesz umieścić mały element w wierszu, który konfiguruje procedurę obsługi zdarzeń obejmującą cały dokument, aby sobie z tym poradzić. W ten sposób uzyskasz lepszy czas ładowania, ale jeśliscripthead próbują zrobić coś zbyt wcześnie, możesz im to powiedzieć lub, lepiej, ustawić w kolejce to, co chcieli zrobić, i zrobić to, gdy cały skrypt będzie gotowy).

TJ Crowder
źródło
17
+1. Innym sposobem radzenia sobie z interakcją przed załadowaniem js jest sprawienie, aby strona działała bez javascript. Upewnij się, że wszystkie linki działają itp, chociaż oczywiście spowodują przeładowanie strony. Następnie przejmij linki i inne rzeczy za pomocą js i dodaj swój Ajax lub inne dzwonki i gwizdki :)
Adrian Schmidt
1
Jak poradzisz sobie z kolejkowaniem akcji? Czy istnieje wzorzec projektowy lub jakieś „typowe rozwiązanie”, które mogę znaleźć w tej sprawie?
HC_
@HC_: Co masz na myśli mówiąc „kolejkowanie akcji”?
TJ Crowder
@TJCrowder Z ostatniego zdania odpowiedzi: „lub, lepiej, umieść w kolejce to, co chcieli zrobić i zrób to, gdy cały skrypt będzie gotowy”. Zastanawiałem się tylko, czy istnieją „optymalne” sposoby na zrobienie tego, ponieważ jestem pewien, że mógłbym wymyślić „jakiś” sposób na zrobienie tego, ale jestem pewien, że byłby to… krzywo zaskoczony, gdyby ktokolwiek inny kiedykolwiek przyjrzał się kodowi, którego dotyczy.
HC_
2
@HC_: Nigdy nie czułem takiej potrzeby i nie znam żadnego konkretnego standardu. Pięć lat później wydaje mi się, że lepiej byłoby po prostu wybrać „Przepraszam, ładuję, sekundę…”. (Chociaż jeśli rzeczy ładują się tak wolno, masz większy problem.) Jeśli zobaczę coś, co wydaje mi się, że można to kliknąć, i kliknę, a nic się nie dzieje, Bóg tylko wie, co kliknę dalej. Jeśli ustawisz je w kolejce, a następnie odtworzysz je, gdy będziesz gotowy, może to być ... mniej niż idealne.
TJ Crowder
3

Twoja strona będzie ładować się wolniej, rozpraszając $(document).ready()skrypty w całym DOM (zamiast wszystkich na końcu), ponieważ najpierw wymaga synchronicznego załadowania jQuery .

$ = jQuery. Nie możesz więc używać $w swoich skryptach bez uprzedniego załadowania jQuery. Takie podejście zmusza cię do załadowania jQuery blisko początku strony, co zatrzyma ładowanie strony do czasu pełnego pobrania jQuery.

Nie możesz również asynczaładować jQuery, ponieważ w wielu przypadkach twoje $(document).ready()skrypty będą próbowały wykonać, zanim jQuery zostanie w pełni załadowane asynchronicznie i spowoduje błąd, ponieważ ponownie $nie jest jeszcze zdefiniowany.

To powiedziawszy, istnieje sposób na oszukanie systemu. Zasadniczo ustawienie $równe funkcji, która wypycha $(document).ready()funkcje do kolejki / tablicy. Następnie na dole strony załaduj jQuery, a następnie przejdź przez kolejkę i wykonaj każdą z $(document).ready()nich na raz. Pozwala to odłożyć jQuery do dołu strony, ale nadal używać $go nad nią w DOM. Osobiście nie testowałem, jak dobrze to działa, ale teoria jest słuszna. Pomysł był już od jakiegoś czasu, ale bardzo, bardzo rzadko go widziałem. Ale wydaje się, że to świetny pomysł:

http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax

Jake Wilson
źródło