В HTML испытывают следующие три типа скрипта:
<script src='xxx'></script><script src='xxx' async></script><script src='xxx' defer></script>
Так в чем же разница между этими тремя типами скриптов?
script
Когда браузер анализирует HTML, если он встречает тег сценария без каких-либо атрибутов, он приостанавливает анализ, сначала отправляет сетевой запрос, чтобы получить содержимое кода сценария JS, а затем позволяет механизму JS выполнить код и возобновить его, когда код выполняется. Весь процесс показан на рисунке ниже:
Видно, что скрипт блокирует парсинг HTML браузером.Если сетевой запрос на получение JS-скрипта задерживается и не отвечает, или время выполнения JS-скрипта слишком велико, то в результате будет белый экран, а пользователь не видит содержимое страницы.
async script
async означает асинхронный, например, в исходном коде Qiniu много асинхронного:
Когда браузер встречает сценарий с асинхронным атрибутом, сетевой запрос, запрашивающий сценарий, является асинхронным и не блокирует анализ HTML браузером.После возврата сетевого запроса, если HTML не был проанализирован в это время, браузер pause Для синтаксического анализа позвольте движку JS сначала выполнить код, а затем проанализируйте код после выполнения, как показано на следующем рисунке:
Конечно, если HTML был проанализирован до того, как возвращается запрос JS-скрипта, то ничего не происходит, и JS-код выполняется немедленно, как показано на следующем рисунке:
Таким образом, асинхронность неуправляема, поскольку время выполнения не определено, если вы получаете элемент DOM в асинхронном JS-скрипте, вы можете его получить, а можете и не получить. А если асинхронных несколько, то порядок выполнения между ними тоже неопределенный, и он полностью зависит от результатов передачи по сети, кто первый придет и кого выполнит.
defer script
defer означает задержку, например, в исходном коде Nuggets их много:
Когда браузер встречает сценарий с атрибутом defer, сетевой запрос на получение сценария также является асинхронным и не блокирует анализ HTML браузером. Браузер не будет приостанавливать синтаксический анализ и выполнять JS-код, а будет ждать завершения синтаксического анализа HTML перед выполнением JS-кода, как показано ниже:
Если имеется несколько тегов сценария отсрочки, браузеры (кроме IE9 и ниже) обеспечат их выполнение в том порядке, в котором они появляются в HTML, не нарушая зависимости между сценариями JS.
Наконец, согласно приведенному выше анализу, порядок выполнения различных типов скриптов и блокирует ли они синтаксический анализ HTML, можно резюмировать следующим образом:
| тег скрипта | Порядок выполнения JS | Блокировать ли синтаксический анализ HTML |
|---|---|---|
<script> |
Заказ в HTML | блокировать |
<script async> |
Порядок возврата сетевого запроса | может и не блокировать |
<script defer> |
Заказ в HTML | не блокирует |