Приоритеты загрузки JavaScript в Chrome

То, как браузеры планируют выполнение и затем выполняют скрипты, может влиять на производительность веб-страниц. Хотя такие техники, как <script defer>, <link rel = preload> (и подобные) влияют на загрузку скрипта, также полезным будет знание о том, как именно браузеры их интерпретируют. Благодаря Kouhei Ueno (разработчик в Google - прим. перев.) теперь у нас есть обновленная сводная таблица о планировании работы скриптов в Chrome.

	[ПЗ] — Приоритет загрузки (для движка Blink)	[ПВ] — Приоритет выполнения	[Исп] — Где должно быть использовано?
`<script>` в `<head>`	[ПЗ] — Средний/Высокий	[ПВ] — Очень высокий — блокирует парсер	[Исп] — Скрипты, которые влияют на макет содержимого "Первого значимого отображения" (FMP) / "Первой содержательной отрисовки" (FCP) Скрипты, которые должны быть запущены раньше других скриптов Примеры: Среда выполнения (если не визуализирована статически) Полифиллы A/B-тестирование, которое влияет на структуру DOM всей страницы
`<link rel=preload>` + `<script async>` или `<script type=module async>`	[ПЗ] — Средний/Высокий	[ПВ] — Высокий — прерывает парсер	[Исп] — Скрипты, которые генерируют критический контент (необходимый для FMP) Но которые не должны влиять на разметку Above the fold части страницы Скрипты, которые запускают сетевые выборки динамически вставленного контента Скрипты, которые должны выполняться, как только закончен их импорт получен, используйте `<script async type=module>` Примеры: Отрисовка чего-нибудь на `<canvas>`
`<script async>`	[ПЗ] — Самый низкий/Низкий	[ПВ] — Высокий — прерывает парсер	[Исп] — Будьте внимательны принимая решение об использовании `<script async>`. Сегодня этот метод часто используется для некритических скриптов, но в противоречие с низкоприоритетной загрузкой выполняются такие скрипты с высоким приоритетом.
`<script defer>`	[ПЗ] — Самый низкий/Низкий	[ПВ] — Очень низкий — выполняется после `<script>`ов в конце `<body>`	[Исп] — Скрипты, которые генерируют некритический контент Скрипты, которые предоставляют ключевые интерактивные функции, которые будут использованы на более чем половине просмотров страниц Примеры: Рекламные фреймворки Среда выполнения (если выполняется на стороне клиента или на сервере)
`<script>` в конце `<body>`	[ПЗ] — Средний/Высокий	[ПВ] — Низкий — ждёт окончания работы парсера	[Исп] — Будьте осторожны при использовании `<script>` в конце `<body>`, если считаете, что они имеют низкий приоритет. Такие скрипты имеют средний/высокий приоритет загрузки.
`<script defer>` в конце `<body>`	[ПЗ] — Самый низкий/Низкий — конец очереди загрузки	[ПВ] — Очень низкий — выполняется после `<script>`ов в конце `<body>`	[Исп] — Скрипты, которые предоставляют редко использующиеся интерактивные функции Примеры: Загрузка блока "Связанные статьи" Функция "Оставить отзыв"

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

Если вы веб-разработчик и вас интересует, где можно увидеть «Приоритет загрузки», Chrome DevTools имеет дополнительный столбец «Приоритет», доступный на панели «Сеть». Щелкните правой кнопкой мыши заголовки столбцов, и вы сможете включить его.

Вышеупомянутая таблица приоритетов актуальна на февраль 2019 года. Лично я хотел бы лучше понимать приоритеты загрузки также и в других браузерах. Надеюсь, этот обзор будет полезен!

Спасибо Kouhei, Dom Faralino, Pat Meenan, Kenji Baheux и Yoav Weiss за их вклад, помогающий лучше объяснить работу сетевого стека Chrome.

Перевел scorp13

Статья является свободным переводом материалов сайта addyosmani.com
Автор Addy Osmani