Асинхронный и готовый документ

Question

Я пытаюсь оптимизировать свои страницы, помещая в мои скрипты некоторые атрибуты async. Кажется, что я разбил свой javascript, так как $(document).ready выполняется до загрузки всех скриптов!

Я видел, что могу решить проблему, поставив $(window).load вместо $(document).ready, но мне было интересно, есть ли лучшее решение. Триггер решение 2 проблемы в моем случае:

1. Я должен изменить все $(document).ready и сказать всем developpers не использовать его больше
2. скрипты будут выполняться после того, как будут загружены все изображения. На моем сайте много тяжелых изображений, и мне действительно нужно, чтобы некоторые сценарии исполнялись как можно скорее после того, как dom готов.

У вас есть волшебные трюки? Может, положить все сценарии в конец? используйте defer вместо async?

Answer 1

После некоторых обширных исследований, я могу определенно сказать, что создание скриптов в конце страницы - лучшая практика.

Yahoo согласен со мной: http://developer.yahoo.com/performance/rules.html#js_bottom

Google не говорят об этой практике, и, кажется, предпочитает асинхронное сценарии: https://developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources

ИМХО, положить скрипт в конце страницы имеет несколько преимуществ по сравнению с асинхронном/отложить:

• Он будет работать на всех браузер (да, даже IE;))
• Вы гарантировать порядок выполнения
• Вам не нужно использовать $(document).ready или $(window).load
• Ваши сценарии могут выполнить, прежде чем ваши изображения будут загружены
• Как асинхронные/отложить, ваша страница будет отображаться быстрее
• Когда DOM вызвать готовое событие, все скрипты загружаются
• может быть оптимизирована путем объединения всех JS в одном файле без проблем (с помощью такого инструмента, как mod_pagespeed)

единственный недостаток, который я вижу, что браузер не сможет распараллелить загрузки , Одной из веских причин использовать async/defer вместо этого является то, что у вас есть сценарий, который полностью независим (не нужно полагаться на порядок выполнения) и который не нужно выполнять в определенный момент времени. Пример: аналитика google.