Основным способом вставить код JavaScript в HTML -страницу является через тег скрипта. К ним относятся две формы. Первым является непосредственное вставку кода JS между тегами скрипта, а второе - ввести внешние файлы JS через атрибут SRC. Поскольку интерпретатор блокирует рендеринг остальной части страницы во время анализа и выполнения кода JS, это приведет к долгосрочному выпадению и задержкам для страниц с большим количеством кода JS. Чтобы избежать этой проблемы, рекомендуется разместить все ссылки на JS до тега </body>.
Существует два атрибута тегов сценариев, отсрочки и асинхрон, поэтому использование тегов скрипта разделено на три ситуации:
1. <script src = "example.js"> </script>
Без атрибута отложенного или асинхрома браузер немедленно загрузит и выполнит соответствующий сценарий. То есть, прежде чем рендерировать документ после тега сценария, вы не ждете последующей загрузки элементов документа и начнете загружать и выполнять после прочтения. Это заблокирует загрузку последующего документа;
2. <Script async src = "example.js"> </script>
С атрибутом Async это означает, что загрузка и рендеринг последующих документов выполняются параллельно с загрузкой и выполнением сценариев JS, то есть асинхронным выполнением;
3. <Script DEFE SRC = "Пример.JS"> </script>
С атрибутом DEFE процесс загрузки последующих документов и загрузку сценария JS (только загрузка, но не выполнять в настоящее время) выполняются параллельно (асинхронно). Выполнение сценария JS должно ждать, пока все элементы документа не будут проанализированы, и до того, как выгружающее событие Domcontent, запускает выполнение.
Следующий рисунок может интуитивно увидеть разницу между тремя:
Среди них Blue представляет время загрузки сети сценариев JS, Red представляет время выполнения сценария JS, а Green представляет разрешение HTML.
Из рисунка мы можем уточнить следующие точки:
1. DEFER и ASYNC являются согласованными в процессе загрузки сети и оба выполняются асинхронно;
2. Разница между ними заключается в том, что сценарий выполняется после его загрузки. Можно видеть, что отсрочка больше соответствует требованиям большинства сценариев для загрузки и выполнения сценариев приложения;
3. Если есть несколько сценариев с атрибутами DEFE, они выполняют сценарий в порядке загрузки; Для Async его загрузка и выполнение тесно связаны. Независимо от приказа об объявлении, он будет выполнен непосредственно до тех пор, пока нагрузка будет завершена. Он мало используется для сценариев приложений, потому что он вообще не рассматривает зависимости.
краткое содержание:
Общая точка между DEFER и Async заключается в том, что они могут загружать файлы JS параллельно и не будут блокировать загрузку страницы. Разница в том, что после загрузки DEFE JS будет ждать загрузки всей страницы перед выполнением. Async выполнит JS сразу после загрузки. Поэтому, если существует строгий порядок выполнения JS, рекомендуется использовать Defer для загрузки.
Выше приведено подробное объяснение разницы между атрибутами DEFER и Async в JS, представленном вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!