Это сообщение появляется, когда PageSpeed Insights обнаруживает, что вы используете синхронную версию скрипта вместо асинхронной.
Когда пользователь запрашивает страницу, браузер берёт HTML и собирает DOM, затем берёт CSS и собирает CSSOM, а затем – генерирует дерево отрисовки, сопоставляя DOM и CSSOM. Если нужно обработать какой-то JavaScript, то браузер не начнёт отрисовывать страницу, пока не завершится его загрузка и обработка. Поэтому разработчики должны чётко «сказать» браузеру, чтобы он не ждал и сразу начинал отрисовывать.
Для скриптов признак асинхронности устанавливается с помощью HTML-атрибутов defer и async. Например:
При одновременном указании async и defer в современных браузерах будет использован только async, defer сработает только в старых версиях IE.
Загрузка асинхронного скрипта происходит в фоновом режиме одновременно с обработкой страницы, поэтому страница обрабатывается быстрее. Раньше большинство скриптов были синхронными, однако их новые версии поддерживают асинхронную обработку.
Если в ресурсах JavaScript используется метод document.write, использовать асинхронную загрузку небезопасно. Рекомендуется переписать скрипты с использованием других средств. Кроме того, если на странице используются взаимозависимые скрипты, при асинхронной загрузке JavaScript убедитесь, что скрипты загружаются в правильном порядке.
Если же нужно сохранить порядок выполнения, то есть добавить несколько скриптов, которые выполняться строго один за другим, то используется свойство script.async = false:
С учетом особенностей работы разных браузеров и с использованием defer, скрипт будет выглядеть так:
Минифицированная версия:
Еще один вариант загрузчика скриптов с индивидуальной настройкой асинхронности:
Когда пользователь запрашивает страницу, браузер берёт HTML и собирает DOM, затем берёт CSS и собирает CSSOM, а затем – генерирует дерево отрисовки, сопоставляя DOM и CSSOM. Если нужно обработать какой-то JavaScript, то браузер не начнёт отрисовывать страницу, пока не завершится его загрузка и обработка. Поэтому разработчики должны чётко «сказать» браузеру, чтобы он не ждал и сразу начинал отрисовывать.
Для скриптов признак асинхронности устанавливается с помощью HTML-атрибутов defer и async. Например:
<script defer src="my.js">Атрибут defer поддерживается всеми браузерами, включая самые старые IE. Атрибут async поддерживается всеми браузерами, кроме IE9 и старше. Относительный порядок обработки скриптов при использовании defer будет сохранен, а при использовании async первым сработает тот скрипт, который раньше загрузится. Еще одна особенность, скрипт с async выполнится, как только загрузится. Возможно, до того как весь документ готов. А скрипт с defer дождется готовности всего документа.
При одновременном указании async и defer в современных браузерах будет использован только async, defer сработает только в старых версиях IE.
Загрузка асинхронного скрипта происходит в фоновом режиме одновременно с обработкой страницы, поэтому страница обрабатывается быстрее. Раньше большинство скриптов были синхронными, однако их новые версии поддерживают асинхронную обработку.
Если в ресурсах JavaScript используется метод document.write, использовать асинхронную загрузку небезопасно. Рекомендуется переписать скрипты с использованием других средств. Кроме того, если на странице используются взаимозависимые скрипты, при асинхронной загрузке JavaScript убедитесь, что скрипты загружаются в правильном порядке.
Динамическое добавление скриптов
Дескрипторы <script> можно добавлять на страницу в любой момент при помощи самого javascript. Скрипты, добавленные таким образом, ведут себя так же, как скрипты с атрибутом async. То есть, выполняются как только загрузятся, без сохранения относительного порядка.Если же нужно сохранить порядок выполнения, то есть добавить несколько скриптов, которые выполняться строго один за другим, то используется свойство script.async = false:
С учетом особенностей работы разных браузеров и с использованием defer, скрипт будет выглядеть так:
Минифицированная версия:
Еще один вариант загрузчика скриптов с индивидуальной настройкой асинхронности:
Комментарии
Отправить комментарий