То, как браузеры планируют выполнение и затем выполняют скрипты, может влиять на производительность веб-страниц. Хотя такие техники, как <script defer>
, <link rel = preload>
(и подобные) влияют на загрузку скрипта, также полезным будет знание о том, как именно браузеры их интерпретируют. Благодаря Kouhei Ueno (разработчик в Google - прим. перев.) теперь у нас есть обновленная сводная таблица о планировании работы скриптов в Chrome.
Приоритет загрузки (для движка Blink) | Приоритет выполнения | Где должно быть использовано? | |
---|---|---|---|
<script>
в <head>
| Средний/Высокий | Очень высокий — блокирует парсер |
Примеры:
|
<link rel=preload>
+ <script async>
или <script type=module async>
| Средний/Высокий | Высокий — прерывает парсер |
Примеры:
|
<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