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

Приоритет загрузки (для движка Blink)Приоритет выполненияГде должно быть использовано?
<script> в <head> Средний/ВысокийОчень высокий — блокирует парсер
Примеры:
  • Среда выполнения (если не визуализирована статически)
  • Полифиллы
  • 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