В HTML существует несколько способов включения файла JavaScript. Я объясню четыре различных метода, их недостатки и, наконец, выделю лучший подход.

1. в

В этом подходе при анализе кода файл javascript загружается первым перед HTML внутри тела, и если JavaScript пытается манипулировать элементами тела, которые еще не были проанализированы, это может привести к ошибкам, поскольку содержимое HTML не полностью обработано. загружено.

Такое поведение блокировки задерживает синтаксический анализ и рендеринг остальной части страницы, что влияет на производительность и удобство использования.

2. в

При таком подходе HTML полностью анализируется до загрузки и выполнения JavaScript, что предотвращает ошибки, связанные с отсутствием элементов DOM. Этот подход хорош, но поскольку анализ HTML и загрузка JavaScript происходят последовательно, в целом это может занять больше времени, поскольку эти два процесса происходят в разное время

3. в

При таком подходе мы делаем JavaScript асинхронным, поэтому он не блокирует загрузку HTML. И анализ HTML, и загрузка JavaScript происходят параллельно. Однако если JavaScript выполняется до того, как HTML будет полностью проанализирован, и js попытается манипулировать еще не загруженными HTML-элементами, это может привести к ошибкам.
Примечание: — этот подход может сэкономить время, но за счет одновременной загрузки html и js, но более уязвим к ошибкам

4. в

Этот подход аналогичен третьему, в котором анализ HTML и загрузка JavaScript происходят параллельно. Однако даже если сначала загружается JavaScript, браузер ждет, пока HTML не будет полностью проанализирован, прежде чем выполнять скрипт.

Резюме: лучший подход

Обычно лучше всего использовать:

Почему:

• Не блокирует анализ HTML (неблокирующая загрузка).
• Это гарантирует запуск сценария после полного анализа DOM, что делает управление элементами DOM более безопасным.
• Сохраняет порядок выполнения скриптов, если у вас есть несколько отложенных скриптов.

В случаях, когда скрипт не зависит от содержимого DOM (например, скрипты отслеживания или реклама), вы можете использовать асинхронный режим для повышения производительности.