Я работаю над обновлением компонента Google Sign-In. В документе Google говорится, что в мой html-файл нужно включить следующее:
<script src = "https://accounts.google.com/gsi/client" async defer></script>
Вот документ Google Doc.
Я понимаю атрибуты async и defer так, что они загружают скрипт в другом порядке и поэтому не могут быть применены одновременно. Вот ТАК статья для ознакомления ТАК статья.
Значит, я что-то неправильно понимаю или почему документ Google говорит мне использовать оба тега?
🤔 А знаете ли вы, что...
JavaScript поддерживает работу с куки и хранилищем веб-браузера для сохранения данных на клиентской стороне.
Да, они взаимоисключающие.
async связано со скачиванием скрипта. Это означает, что парсинг HTML не должен блокироваться при загрузке скрипта.
defer относится к выполнению скрипта. Это означает, что выполнение должно быть отложено до завершения всего парсинга HTML.
Но, как отмечено в этом ответе, если вы укажете оба, defer будет проигнорировано.
Вы все еще можете указать оба, чтобы поддерживать старые браузеры, которые не поддерживают async.
Да, они взаимоисключающие. Когда атрибут async присутствует (и поддерживается), атрибут defer отбрасывается.
Если вы посмотрите на характеристики , (шаг 33, временная ссылка).
- Если тип el —
"classic", а el имеет атрибутsrc, или тип el —"module":1. Утверждение: результат el равен
"uninitialized".2. Если у el есть атрибут
asyncили асинхронная сила el имеет значение true:1. Пусть сценарии будут набором сценариев для документа на время подготовки, которые будут выполняться как можно скорее.
2. Добавить эль к скриптам.
3. Установите следующие шаги для выполнения, когда результат будет готов:
1. Выполнить элемент скрипта эл.
2. Убрать эл из скриптов.
3. В противном случае [...]
[...]
4. В противном случае, если у el есть атрибутdeferили у el тип"module":
Из этого мы видим, что когда установлен атрибут async, время выполнения скрипта уже определено, и что атрибут defer отбрасывается через логическое предложение Иначе.
Вы все еще можете позволить обоим откатиться на поведение defer, когда async не поддерживается.
defer игнорируется, если указан async, а async всегда имеет более высокий приоритет. но в старых браузерах не было поддержки асинхронности и это скорее новая опция. поэтому, когда вы пишете
<script src = "https://accounts.google.com/gsi/client" async defer></script>
это означает, что браузер должен использовать асинхронный метод для загрузки скрипта, если только он не поддерживает его, если это так, он может вместо этого использовать отсрочку.