Разница между отсрочкой и асинхронностью в скрипте

внешний интерфейс JavaScript

определение

  defer：此布尔属性被设置为向浏览器指示脚本在文档被解析后执行。
  async：设置此布尔属性，以指示浏览器如果可能的话，应异步执行脚本。

  1. Для отсрочки мы можем думать, что js внешней цепочки размещены внизу страницы. Загрузка js не будет блокировать рендеринг страницы и загрузку ресурсов. Однако defer будет выполняться в порядке исходного js, поэтому, если есть зависимости до и после js, вы можете уверенно его использовать.

  2. Для асинхронности это новый атрибут в html5, его функция — загружать и выполнять скрипты асинхронно, не блокируя загрузку страницы из-за загрузки скриптов. После загрузки он будет выполнен немедленно.В случае асинхронного js будет выполняться сразу после загрузки, поэтому очень вероятно, что он не будет выполняться в исходном порядке. Если js до и послезависимый, с асинхронностью вполне возможноошибка.

разница

Тот же пункт:

  • Не блокировать отрисовку страницы при загрузке файлов
  • Недействительно для встроенного скрипта (внутренний скрипт)
  • Метод document.write нельзя вызывать в сценариях, использующих эти два свойства.
  • Существует обратный вызов события onload скрипта

разница:

  • HTML-версия html4.0 определяет отсрочку, html5.0 определяет асинхронность.
  • Совместимость с браузером
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
async attribute (Supported) 3.6 (1.9.2) 10 — (Supported)
defer attribute (Supported) 3.5 (1.9.1) 4 — (Supported)
  • время исполнения
    Каждый сценарий асинхронного атрибута выполняется сразу после его загрузки и будетПеред событием загрузки окнавоплощать в жизнь. Таким образом, возможно, что порядок выполнения сценария будет нарушен; каждый сценарий атрибута отсрочки выполняется в исходном порядке после анализа страницы и будет выполняться до DOMContentLoaded документа.

Эпилог

Проще говоря, есть три возможных случая использования этих двух свойств.

  1. Если async имеет значение true, скрипт выполняется асинхронно после завершения загрузки.
  2. Если async имеет значение false, а defer — true, скрипт будет выполнен после анализа страницы.
  3. Если и async, и defer равны false, скрипт остановит анализ страницы во время анализа страницы, загрузит и немедленно выполнит его.

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

Категории