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

29

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

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

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

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

  • 0
    вызовы готовности документа выполняются также для сценариев, использующих document.ready после того, как jQuery обнаружил состояние готовности документа. На сайте, где используется jQuery, попробуйте использовать следующее после загрузки всех ресурсов: $(document).ready(function () {console.log('READY');});
Теги:

1 ответ

27
Лучший ответ

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

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

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

IMHO, размещение script в конце страницы имеет несколько преимуществ по сравнению с async/defer:

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

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

Поделиться
  • 0
    Это не полностью гарантирует выполнение, помещая их в DOM. Если у вас слишком много JavaScript и / или HTML для браузера, вам нужен requirejs или любой другой системный загрузчик, подобный этому. Я видел дизайн, который работал только со сжатым JavaScript, потому что это было слишком много. Это была отзывчивая тема начальной загрузки 3.x с эффектами при прокрутке вниз по странице.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню