BLACK FRIDAY

осталось 2 дня

Скидка 10% и подарок на выбор — при покупке одной программы
При покупке двух программ  — вторая со скидкой 50%
Все статьи | Код

Руководство: как увеличить скорость загрузки страницы со скриптами с помощью defer и async

Руководство: как увеличить скорость загрузки страницы со скриптами с помощью ... главное изображение

JS-скрипты, неудачно расположенные в HTML-коде, могут значительно снизить скорость загрузки страницы. Разберемся, как повысить скорость загрузки в старых версиях браузеров и как правильно использовать async и defer, которые поддерживаются в новых версиях.

Это адаптированный перевод статьи Efficiently load JavaScript with defer and async из блога проекта flaviocopes. Повествование ведется от лица автора оригинала.

Расположение имеет значение

Стандартный способ встраивания скрипта в HTML-код страницы выглядит так:

<script src="script.js"></script>

Каждый раз, когда встретится такая или похожая строка, будет выполнен запрос на получение данных файла, а парсер продолжит свою работу после выполнения скрипта.

Классический подход к обучению HTML предполагает, что теги скрипта должны находиться в <head>:

<html>
  <head>
    <title>Title</title>
    <script src="script.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

Однако такой подход приводит к задержкам при загрузке страницы. Когда анализатор доходит до строки со скриптом, он на время останавливается для его извлечения и выполнения, и только после этого переходит к разбору<body>.

Распространенное решение проблемы — перенос скрипта в нижнюю часть страницы, перед закрывающим тегом <body>. В этом случае скрипт выполняется после того, как вся страница уже проанализирована до тега.

Это лучшее решение по ускорению загрузки страницы для старых браузеров, которые не поддерживают атрибуты async и defer. О последних поговорим отдельно.

async и defer

Прежде чем начать, стоит уточнить, что использование обоих атрибутов накладывает некоторые ограничения, а приведенное ниже руководство по времени загрузки — не исчерпывающее.

Синтаксически и async и defer — булевые атрибуты, которые используются следующим образом:

<script async src="script.js"></script>
<script defer src="script.js"></script>

Если в коде есть оба атрибута, async имеет приоритет и выполняется в первую очередь в современных версиях браузеров. В старых версиях, напротив, приоритет будет отдан defer.

Проверить совместимость атрибутов с разными версиями браузеров можно по этим таблицам: раз и два

Важно отметить, что оба атрибута стоит использовать только в верхней части страницы (в <head>): перенос в <body> делает их совершенно бесполезными.

Производительность

Если async и defer отсутствуют в <head>

Синтаксический анализатор прекращает работу до тех пор, пока скрипт не будет выполнен. Как только этот процесс завершится, анализ продолжится.

Читайте также: Как сохранять фокус на протяжении всего обучения: советы от Хекслета

Если async и defer отсутствуют в <body>

Парсинг выполняется без пауз: сразу по его завершению загружается и выполняется скрипт. Синтаксический анализ выполняется еще до загрузки скрипта, поэтому страница загружается быстрее, чем в предыдущем случае.

Если async находится в <head>

Сценарий загружается асинхронно, а синтаксический анализатор приостанавливает работу на время его выполнения.

Если defer находится в <head>

Скрипт извлекается асинхронно и выполняется только после завершения анализа HTML.

Парсинг проходит с той же скоростью, как если бы скрипт находился в конце тега body, но в целом выполнение скрипта завершается намного раньше, поскольку он загружается параллельно с парсингом HTML. Таким образом этот вариант — наиболее выигрышный с точки зрения скорости загрузки страницы.

Блокировка синтаксического анализа

async приостанавливает синтаксический анализ страницы, а defer — нет.

Блокировка рендеринга

Ни async, ни defer не блокируют рендеринг — этот процесс полностью зависит от кода на странице. Поэтому важно убедиться, что сценарии запускаются после события onLoad.

domInteractive

Скрипты defer выполняются сразу после события domInteractive. Последнее, в свою очередь, происходит после загрузки, анализа и построения DOM HTML.

СSS и изображения на этом этапе еще не проанализированы и не загружены: как только это произойдет, браузер сначала выдаст событие domComplete, а затем — onLoad.

Порядок выполнения

Еще один аргумент за использование defer — скрипты, помеченные как async, выполняются в случайном порядке, тогда как скрипты с defer — в строго определенном.

Как ускорить загрузку страницы

Лучший способ — прописать скрипты в <head> и добавить атрибут defer в тег script. Этот сценарий быстро запускает событие domInteractive :

<script defer src="script.js"></script>

Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях

Аватар пользователя Oleg Sabitov
Oleg Sabitov 15 февраля 2022
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
с нуля
Разработка фронтенд-компонентов для веб-приложений
1 декабря 10 месяцев
Иконка программы Онлайн-буткемп. Фронтенд-разработчик
Профессия
Новый с нуля
Интенсивное обучение профессии в режиме полного дня
15 декабря 4 месяца
Иконка программы Python-разработчик
Профессия
с нуля
Разработка веб-приложений на Django
1 декабря 10 месяцев
Иконка программы Java-разработчик
Профессия
с нуля
Разработка приложений на языке Java
1 декабря 10 месяцев
Иконка программы PHP-разработчик
Профессия
с нуля
Разработка веб-приложений на Laravel
1 декабря 10 месяцев
Иконка программы Инженер по тестированию
Профессия
с нуля
Ручное тестирование веб-приложений
дата определяется 4 месяца
Иконка программы Node.js-разработчик
Профессия
с нуля
Разработка бэкенд-компонентов для веб-приложений
1 декабря 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
с нуля
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
1 декабря 16 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
c опытом
Создание веб-приложений со скоростью света
1 декабря 5 месяцев
Иконка программы Верстальщик
Профессия
с нуля
Верстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Аналитик данных
Профессия
В разработке с нуля
Сбор, анализ и интерпретация данных
дата определяется 8 месяцев