JavaScript считается «ресурсом, блокирующим синтаксический анализатор». Это означает, что синтаксический анализ самого HTML-документа заблокирован JavaScript. Когда синтаксический анализатор достигает тега <script>, будь то внутренний или внешний, он прекращает выборку (если это внешний) и запускает ее.

Где находится элемент <script>?

Асинхронное и отложенное выполнение скриптов важнее, когда элемент <script> расположен не в самом конце документа. HTML-документы анализируются по порядку, от первого открывающего элемента <html> до его закрытия.

Примечание.Если внешний файл JavaScript файл помещается прямо перед закрывающим элементом </body>, он становится гораздо менее важным. использовать атрибут async или defer. Поскольку синтаксический анализатор к этому моменту завершит работу с большей частью документа, у файлов JavaScript остается не так много операций синтаксического анализа, которые можно было бы заблокировать.

Является ли сценарий автономным?

Для файлов сценариев, которые не зависят от других файлов и/или сами не имеют никаких зависимостей, особенно полезен атрибут async. Поскольку нас не волнует, в какой именно момент выполняется файл, асинхронная загрузка является наиболее подходящим вариантом.

Полагается ли сценарий на полностью проанализированный DOM?

В многих случаях файл скрипта содержит функции, требующие взаимодействия с DOM. Или он может зависеть от другого файла, включенного в страницу. В этих случаях DOM должен быть полностью проанализирован перед выполнением скрипта. Как правило, такой файл размещается внизу страницы, чтобы убедиться, что все до его анализа. Однако в ситуациях, когда по какой-либо причине рассматриваемый файл необходимо поместить в другое место, можно использовать атрибут defer.

Является ли сценарий (небольшой) зависимостью?

Наконец, если скрипт относительно мал и/или зависит от других файлов, может быть полезнее определить его как встроенный. Несмотря на то, что встроенный код заблокирует синтаксический анализ HTML-документа, это не должно сильно мешать, если документ небольшого размера. Кроме того, если он зависит от других файлов, может потребоваться незначительная блокировка.

В движке V8 (используемом в Chromium) предпринимается попытка проанализировать все сценарии, независимо от их атрибутов, в отдельном выделенном потоке для выполнения сценариев. Таким образом, блокирующий парсер характер файлов JavaScript должен быть сведен к минимуму как по умолчанию.