Asynchroniczne i gotowe dokumenty

Question

Próbuję zoptymalizować moje strony, umieszczając niektóre atrybuty async w moich skryptach. Wydaje się, że łamie mój javascript od $(document).ready jest wykonywany przed załadowaniem wszystkich skryptów!

Zobaczyłem, że mogę rozwiązać mój problem, wstawiając $(window).load zamiast $(document).ready, ale zastanawiałem się, czy istnieje lepsze rozwiązanie. Ten wyzwalacz rozwiązanie 2 problemy w moim przypadku:

1. muszę zmienić wszystkie $(document).ready i powiedzieć wszystkim developpers aby nie używać go już
2. skrypty zostaną wykonane po wszystkie obrazy są ładowane. Moja strona internetowa zawiera dużo ciężkich obrazów i naprawdę potrzebuję skryptów do wykonania JAK NAJSZYBCIEJ, gdy dom jest gotowy.

Czy masz jakieś magiczne sztuczki? Może na koniec wszystkie skrypty? użyć defer zamiast async?

Answer 1

Po kilku rozległych badaniach mogę zdecydowanie stwierdzić, że umieszczanie skryptów na końcu strony jest najlepszą praktyką.

Yahoo zgadza się ze mną: http://developer.yahoo.com/performance/rules.html#js_bottom

Google nie mówić o tej praktyce i zdaje się preferować skrypty async: https://developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources

IMHO, stawiając skrypt na końcu strony ma kilka zalet w porównaniu async/odroczyć:

• będzie działać na wszystkich przeglądarce (tak, nawet IE;))
• można zagwarantować kolejność wykonywania
• Nie trzeba używać $(document).ready lub $(window).load
• Twoje skrypty mogą wykonać przed Twoje obrazy są ładowane
• Jak asynchroniczny/odroczenie zostanie wyświetlona strona szybciej
• Gdy DOM wywołać gotowy wydarzenie, wszystkie skrypty są ładowane
• można zoptymalizować poprzez połączenie wszystkich JS w jednym pliku bez problemu (za pomocą narzędzia podobnego mod_pagespeed)

Jedyną wadą, że widzę to, że przeglądarka nie będzie mogła parallelize pobrania . Jednym z powodów, dla których warto używać async/defer, jest sytuacja, w której skrypt jest całkowicie niezależny (nie trzeba polegać na kolejności wykonywania) i który nie musi być wykonywany w określonym czasie. Przykład: google analytics.