jaka jest różnica / zaleta / wada pisania skryptu na dole strony i pisania skryptu w
$(document).ready(function(){});
Odpowiedzi:
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).
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