Что происходит, когда тег ‹script› находится внутриHTML-документа?

  1. Браузер загружает HTML после получения фрагментов данных и начинает строить DOM-дерево.
  2. Когда браузер встречает ‹script› ….. ‹/script›, браузер должен прекратить построение DOM и выполнить скрипт. Аналогично в случае внешнего скрипта ‹script src=…. ›‹/script›браузер останавливает построение DOM, загружает скрипт, выполняет загруженный скрипт и затем продолжает оставшуюся часть страницы.

Проблемы:

  1. Скрипты не могут видеть элемент DOM ниже, поэтому не могут добавлять обработчики и т. д.
  2. Если скрипт громоздкий в верхней части страницы, он блокирует страницу. Пользователь не может видеть страницу, пока скрипт не скачается и не запустится.

Приведенный выше код является обходным путем. Скрипт можно добавить внизу страницы, чтобы он видел все элементы и не блокировал страницу. Но это решение далеко от совершенства.

Проблемы:

  1. Браузер видит сценарий только после загрузки всего HTML-документа, и если HTML-код огромен в медленном Интернете, будет заметная задержка.

К счастью, у нас есть два атрибута сценария: async и defer.

Отложить:

Атрибут Defer говорит браузеру продолжить обработку HTML, создавая DOM. Скрипт будет загружен в фоновом режиме и запущен, когда DOM будет готов.
В основном:

  1. Скрипт с отсрочкой никогда не блокирует страницу (скрипты скачиваются параллельно).
  2. Скрипт с отсрочкой всегда выполняется, когда модель DOM готова (но до события DomContentLoaded).
  3. Отложенные скрипты сохраняют свой относительный порядок, как и обычные скрипты. В приведенном выше коде (сначала будет выполнен «long.js», затем «small.js»)
  4. Атрибут отсрочки Только для внешних скриптов.

Асинхронный:

Атрибут Async чем-то похож на атрибут Defer, но со значительными отличиями.
Атрибут Async означает, что скрипты полностью независимы.
1. Другие скрипты не ждут async скриптов, а async скрипты их не ждут.
2. Браузер не ждет блокировать async скрипты.
3. DOMContentLoaded и асинхронные скрипты не ждут друг друга.

Ключевые различия между отсрочкой и асинхронностью:

  1. DOMContentLoaded может произойти как до, так и после async, здесь нет никаких гарантий.
  2. Меньший сценарий small.js идет вторым, но, вероятно, загружается раньше long.js, поэтому small.js запускается первым. Хотя может быть так, что long.js загружается первым, если кешируется, то запускается первым. Другими словами, асинхронные сценарии выполняются в порядке загрузка в первую очередь.

Динамические сценарии:

Динамические скриптыпо умолчанию ведут себя как асинхронные. Но можно явно установитьscript.async = false, тогда он будет вести себя аналогично отложенному.

🥳 и 👏, если вам понравилась эта статья. Предложения приветствуются.