Что делает "async defer" при совместном использовании?
Я наткнулся на следующий фрагмент кода:
<script src = "foo.js" async defer>
Я понимаю, что <script async...> загрузит скрипт, а затем проанализирует его, приостановив анализ HTML. Я также понимаю, что <script defer...> загрузит скрипт и проанализирует его после того, как будет проанализирован весь HTML.
Что делает <script async defer...> (например, async и defer используются вместе)?
И «асинхронная», и «отложенная» загрузка внешнего скрипта асинхронно. Таким образом, вам не нужно устанавливать их оба, если вам действительно не нужен «асинхронный», который имеет более высокий приоритет в современных браузерах. Используйте «async», если вы хотите взаимодействовать со страницей сразу после ее загрузки. Используйте defer, если ваш сценарий зависит от другого сценария, и вы должны использовать их в правильном порядке. Например, сначала идет jQuery (defer), а затем все плагины jQuery, требующие jQuery. Но никогда не устанавливайте async в jQuery, потому что он будет выполняться в любом непредсказуемом месте / времени после загрузки.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если вы укажете оба варианта, async будет иметь приоритет в современных браузерах, тогда как старые браузеры, поддерживающие defer, но не async, вернутся к defer.
Для таблицы поддержки проверьте caniuse.com для асинхронный и для отложить.
P / s: Эти атрибуты имеют смысл только при использовании сценария в части страницы head, и они бесполезны, если вы поместите сценарий в нижний колонтитул body.
Так будет ли современный браузер, например Chrome, рассматривать сценарий как отложенный или асинхронный, когда он встречает их обоих?
async. Для ясности, defer игнорируется, если async установлен и сценарий загружается асинхронно. Если оба присутствуют и браузер поддерживает только defer, тогда он вернется к поведению defer.
Другое объяснение
asyncиdefer: stackoverflow.com/questions/10808109/script-tag-async-defer