Что происходит, когда тег ‹script› находится внутриHTML-документа?
- Браузер загружает HTML после получения фрагментов данных и начинает строить DOM-дерево.
- Когда браузер встречает ‹script› ….. ‹/script›, браузер должен прекратить построение DOM и выполнить скрипт. Аналогично в случае внешнего скрипта ‹script src=…. ›‹/script›браузер останавливает построение DOM, загружает скрипт, выполняет загруженный скрипт и затем продолжает оставшуюся часть страницы.
Проблемы:
- Скрипты не могут видеть элемент DOM ниже, поэтому не могут добавлять обработчики и т. д.
- Если скрипт громоздкий в верхней части страницы, он блокирует страницу. Пользователь не может видеть страницу, пока скрипт не скачается и не запустится.
Приведенный выше код является обходным путем. Скрипт можно добавить внизу страницы, чтобы он видел все элементы и не блокировал страницу. Но это решение далеко от совершенства.
Проблемы:
- Браузер видит сценарий только после загрузки всего HTML-документа, и если HTML-код огромен в медленном Интернете, будет заметная задержка.
К счастью, у нас есть два атрибута сценария: async и defer.
Отложить:
Атрибут Defer говорит браузеру продолжить обработку HTML, создавая DOM. Скрипт будет загружен в фоновом режиме и запущен, когда DOM будет готов.
В основном:
- Скрипт с отсрочкой никогда не блокирует страницу (скрипты скачиваются параллельно).
- Скрипт с отсрочкой всегда выполняется, когда модель DOM готова (но до события DomContentLoaded).
- Отложенные скрипты сохраняют свой относительный порядок, как и обычные скрипты. В приведенном выше коде (сначала будет выполнен «long.js», затем «small.js»)
- Атрибут отсрочки Только для внешних скриптов.
Асинхронный:
Атрибут Async чем-то похож на атрибут Defer, но со значительными отличиями.
Атрибут Async означает, что скрипты полностью независимы.
1. Другие скрипты не ждут async
скриптов, а async
скрипты их не ждут.
2. Браузер не ждет блокировать async
скрипты.
3. DOMContentLoaded
и асинхронные скрипты не ждут друг друга.
Ключевые различия между отсрочкой и асинхронностью:
DOMContentLoaded
может произойти как до, так и послеasync
, здесь нет никаких гарантий.- Меньший сценарий
small.js
идет вторым, но, вероятно, загружается раньшеlong.js
, поэтомуsmall.js
запускается первым. Хотя может быть так, чтоlong.js
загружается первым, если кешируется, то запускается первым. Другими словами, асинхронные сценарии выполняются в порядке загрузка в первую очередь.
Динамические сценарии:
Динамические скриптыпо умолчанию ведут себя как асинхронные. Но можно явно установитьscript.async = false, тогда он будет вести себя аналогично отложенному.
🥳 и 👏, если вам понравилась эта статья. Предложения приветствуются.