JavaScript считается «ресурсом, блокирующим синтаксический анализатор». Это означает, что синтаксический анализ самого HTML-документа заблокирован JavaScript. Когда синтаксический анализатор достигает тега
<script>
, будь то внутренний или внешний, он прекращает выборку (если это внешний) и запускает ее.
Где находится элемент <script>
?
Асинхронное и отложенное выполнение скриптов важнее, когда элемент <script>
расположен не в самом конце документа. HTML-документы анализируются по порядку, от первого открывающего элемента <html>
до его закрытия.
Примечание.Если внешний файл JavaScript файл помещается прямо перед закрывающим элементом </body>
, он становится гораздо менее важным. использовать атрибут async
или defer
. Поскольку синтаксический анализатор к этому моменту завершит работу с большей частью документа, у файлов JavaScript остается не так много операций синтаксического анализа, которые можно было бы заблокировать.
Является ли сценарий автономным?
Для файлов сценариев, которые не зависят от других файлов и/или сами не имеют никаких зависимостей, особенно полезен атрибут async
. Поскольку нас не волнует, в какой именно момент выполняется файл, асинхронная загрузка является наиболее подходящим вариантом.
Полагается ли сценарий на полностью проанализированный DOM?
В многих случаях файл скрипта содержит функции, требующие взаимодействия с DOM. Или он может зависеть от другого файла, включенного в страницу. В этих случаях DOM должен быть полностью проанализирован перед выполнением скрипта. Как правило, такой файл размещается внизу страницы, чтобы убедиться, что все до его анализа. Однако в ситуациях, когда по какой-либо причине рассматриваемый файл необходимо поместить в другое место, можно использовать атрибут defer
.
Является ли сценарий (небольшой) зависимостью?
Наконец, если скрипт относительно мал и/или зависит от других файлов, может быть полезнее определить его как встроенный. Несмотря на то, что встроенный код заблокирует синтаксический анализ HTML-документа, это не должно сильно мешать, если документ небольшого размера. Кроме того, если он зависит от других файлов, может потребоваться незначительная блокировка.
В движке V8 (используемом в Chromium) предпринимается попытка проанализировать все сценарии, независимо от их атрибутов, в отдельном выделенном потоке для выполнения сценариев. Таким образом, блокирующий парсер характер файлов JavaScript должен быть сведен к минимуму как по умолчанию.