Моя шпаргалка.
Обязательные атрибуты в скриптах?
Атрибуты async и defer существуют, чтобы помочь нам ускорить загрузку сайта.
Скрипты с атрибутами defer загружаются и выполняются последовательно, а с async – асинхронно. Кроме того, defer всегда ждёт, пока весь HTML-документ будет готов, а async выполняется сразу после загрузки.
По умолчанию script теги блокируют рендеринг , что означает, что браузер не будет отображать содержимое страницы до тех пор, пока скрипт не запустится. Когда анализатор HTML браузера обнаруживает сценарий, он загружает и выполняет его, прежде чем продолжить обработку остальной части страницы.
Атрибуты async и defer сообщают браузеру, что эти сценарии не обязательно запускать немедленно, и браузер может сначала обработать остальную часть страницы, а затем запустить эти сценарии позже.
Что делает атрибут async ?
Атрибут async гарантирует, что файл JavaScript загружается асинхронно в фоновом режиме и не блокирует рендеринг. Затем сценарий запускается сразу после загрузки, независимо от порядка, в котором сценарии были найдены в документе.
Тег сценария, загруженный асинхронно, выглядит следующим образом: <script src="app.js" async>.
Что делает атрибут defer ?
Атрибут deferсообщает браузеру запустить сценарий после анализа документа. Как и в случае с async атрибутом, это гарантирует, что страница сможет отображаться в это время.
После анализа документа отложенные сценарии запускаются в том же порядке, в котором они были найдены в документе. Это DOM Content Loaded событие указывает на то, что документ был проанализирован и все отложенные сценарии были запущены.
Пример написания defer атрибута в первый скрипт и async во второй.
<script src="/script1.js" defer></script>
…
<script src="/script2.js" async></script>
Асинхронный сценарий (script1.js) запускается сразу после завершения загрузки. Если бы мы хотели, чтобы сценарии 1 и 2 выполнялись по порядку, мы могли бы использовать атрибут defer для обоих.
Событие DOMContentLoaded не срабатывает до тех пор, пока не запустится отложенный сценарий (script2.js).
Оба атрибута гарантируют, что сценарии не блокируют рендеринг, и помогают оптимизировать показатель скорости загрузки. В большинстве случаев асинхронный режим лучший, поскольку он загружает и выполняет код быстрее.
Используйте defer, если у вас есть несколько скриптов, которые зависят друг от друга. defer также означает, что код будет выполняться немного позже, чем при использовании async. Это можно применять, если вы хотите оставить основной поток обработки информации свободным для более важной работы. Но это также может, может сделать загрузку страницы дольше. И пользователь уйдет до того, как браузер завершит анализ документа, или сценарий вообще не запустится, поэтому лучше использовать async сценарии.
Чем асинхронность и отсрочка отличаются от размещения скриптов в конце body?
Размещение скриптов в конце body было обычным явлением до того, как браузеры поддерживали HTML async и defer атрибуты. Это гарантирует, что сценарий не блокирует рендеринг страницы.
Если ваш HTML-документ большой, то размещение скриптов в конце элемента body может означать, что браузеру потребуется больше времени для обнаружения ресурса, поскольку сначала необходимо завершить загрузку полного HTML-ресурса. Напротив, async скрипт на странице head будет быстро обнаружен сканером предварительной загрузки.
Браузеры также не могут определить, что сценарий в конце элемента body не блокирует рендеринг, поэтому они предполагают, что это так, и присваивают запросу высокий приоритет . Это может помочь ускорить загрузку вашего сценария, но также может увеличить конкуренцию за полосу пропускания с ресурсами, блокирующими рендеринг, такими как таблицы стилей CSS. В результате другие ресурсы могут загружаться медленнее.
Влияют ли атрибуты async и defer на SEO ?
Google не учитывает атрибуты напрямую, но их использование может помочь вам оптимизировать скорость страницы и основные веб-показатели . Основные веб-показатели стали фактором ранжирования в 2021 году, поэтому ускорение загрузки вашего веб-сайта не только поможет вам улучшить взаимодействие с пользователем, но и повысить рейтинг в Google.
Вы можете использовать консоль, чтобы увидеть, насколько хорошо ваш сайт оценивается по показателям скорости загрузки.
Обеспечение того, чтобы запросы не блокировали рендеринг и загрузку с правильным приоритетом, — это лишь один аспект обеспечения удобства работы вашего веб-сайта для пользователей.
Если вы работаете с JavaScript, важно понимать разницу между атрибутами async и defer.
КРАТКО:
Атрибуты async и defer используются в HTML для управления загрузкой и выполнением внешних скриптов <script>:
async:Скрипт загружается параллельно с разбором HTML.
Выполняется сразу после загрузки, не дожидаясь завершения разборки HTML.
Подходит для независимых скриптов (например, аналитика).
Порядок выполнения не гарантируется, зависит от времени загрузки.
defer: Скрипт загружается параллельно с разбором HTML.
Выполняется только после полной загрузки и разбора HTML-документа.
Гарантирует сохранение порядка выполнения скриптов, если их несколько.
Пример:
<script src="script1.js" async></script>
<!-- Загрузка и выполнение независимо -->
<script src="script2.js" defer></script>
<!-- Загрузка параллельно, выполнение после HTML -->
Итог:
Используйте async для независимых скриптов, а defer — для скриптов, которые должны работать после загрузки всей страницы.