Атрибуты defer и async — HTML — Дока

1. Кратко
2. Как пишется
3. Как понять
   1. Атрибут async
   2. Атрибут defer
4. Применение
5. Подсказки
6. На собеседовании
   1. Объясните разницу между <script>, <script async> и <script defer>.

Кратко

Скопировано

Скрипты с атрибутами defer загружаются и выполняются последовательно, а с async – асинхронно. Кроме того, defer всегда ждёт, пока весь HTML-документ будет готов, а async выполняется сразу после загрузки.

Как пишется

Скопировано

Оба атрибута являются логическими. Это значит, что им не нужно задавать значение. Если атрибут указан, то браузер понимает это как команду к действию. Чтобы отменить эффект, достаточно убрать атрибут.

Как понять

Скопировано

Обычно браузеры загружают <script> синхронно, во время разбора документа. Поэтому принято добавлять скрипты в конец документа, перед </body>, чтобы они не тормозили загрузку страницы. Но при помощи атрибутов defer и async можно явно управлять порядком загрузки и выполнения скриптов.

Атрибут

async Скопировано

Указывает браузеру по возможности загружать скрипт асинхронно.

Скрипт выполняется полностью асинхронно. Это означает, что файл будет выполняться без ожидания загрузки и отображения веб-страницы. При обнаружении <script async src="..."> браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен – он выполнится.

<script src="script1.js" async></script><script src="script2.js" async></script>
          <script src="script1.js" async></script>
<script src="script2. js" async></script>

Первым выполнится тот скрипт, который быстрее загрузится.

Поддерживается всеми браузерами, кроме IE9-.

Атрибут

defer Скопировано

Указывает браузеру что скрипт должен выполняться после разбора документа, но до события

DOMContentLoaded.

Скрипты с атрибутом defer будут предотвращать запуск события DOMContentLoaded до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация.

<script src="script1.js" defer></script><script src="script2.js" defer></script>
          <script src="script1.js" defer></script>
<script src="script2.js" defer></script>

Первым всегда выполнится script1.js, который подключён раньше. Даже если script2.js загрузится раньше, он будет выполнен после первого скрипта.

Применение

Скопировано

На практике defer используется для скриптов, которым требуется доступ ко всему DOM-дереву или если важен их порядок выполнения.

А async хорош для независимых скриптов, например счётчиков и рекламы, порядок выполнения которых не играет роли.

Подсказки

Скопировано

💡 Динамически вставленный <script> (например, вставленный при помощи document.createElement) по умолчанию загружается браузером асинхронно.

На собеседовании

Скопировано

Задать вопрос в рубрику

❓

Объясните разницу между <script>, <script async> и <script defer>.

Скопировано

🤚 Я знаю ответ

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

<noscript>

ctrl + alt + ←

→

<template>

ctrl + alt + →

Асинхронный JavaScript против отложенного / Хабр

В моей статье «Понимание критического пути рендеринга» (перевод статьи) я писала о том, какой эффект оказывают JavaScript-файлы на Критический Путь Рендеринга(CRP).

JavaScript является блокирующим ресурсом для парсера. Это означает, что JavaScript блокирует разбор самого HTML-документа. Когда парсер доходит до тега <script> (не важно внутренний он или внешний), он останавливается, забирает файл (если он внешний) и запускает его.

Такое поведение может доставить проблемы, если мы загружаем несколько JavaScript-файлов на странице, так как это увеличивает время первой отрисовки, даже если документ на самом деле не зависит от этих файлов.

К счастью, элемент <script> имеет два атрибута async и defer, которые дают нам возможность контролировать то, как внешние файлы загружаются и выполняются.

Нормальное выполнение

Прежде чем понять разницу между этими двумя атрибутами, давайте посмотрим что происходит в их отсутствие. Как было сказано ранее, по умолчанию файлы JavaScript прерывают парсинг HTML-документа до тех пор, пока не будут получены и выполнены.

Возьмём пример, в котором элемент <script> расположен где-то в середине страницы:

<html>  
<head> ... </head>  
<body>  
    ...
    <script src="script.js">
    ....
</body>  
</html> 

Вот что произойдёт, когда парсер будет обрабатывать документ:

Парсинг HTML приостанавливается, пока скрипт не будет загружен и выполнен, тем самым увеличивая количество времени до первой отрисовки.

Атрибут

async

Async используется для того, чтобы указать браузеру, что скрипт может быть выполнен асинхронно.
Парсеру HTML нет необходимости останавливаться, когда он достигает тега <script> для загрузки и выполнении.

Выполнение может произойти после того, как скрипт будет получен параллельно с разбором документа.

<script async src="script.js">  

Атрибут доступен только для файлов, подключающихся внешне. Если внешний файл имеет этот атрибут, то он может быть загружен в то время как HTML-документ ещё парсится. Парсер будет приостановлен для выполнения скрипта, как только файл скрипта будет загружен.

Атрибут

defer

Атрибут defer указывает браузеру, что скрипт должен быть выполнен после того, как HTML-документ будет полностью разобран.

<script defer src="script.js">

Как и при асинхронной загрузке скриптов — файл может быть загружен, в то время как HTML-документ парсится. Однако, даже если файл скрипта будет полностью загружен ещё до того, как парсер закончит работу, он не будет выполнен до тех пор, пока парсер не отработает до конца.

Асинхронное, отложенное или нормальное выполнение?

Итак, когда же следует использовать асинхронное, отложенное или нормальное выполнение JavaScript? Как всегда, это зависит от ситуации и существуют несколько вопросов, которые помогут принять вам правильное решение.

Где расположен элемент

<script> ?

Асинхронное и отложенное выполнения наиболее важны, когда элемент <script> не находится в самом конце документа. HTML-документы парсятся по порядку, с открытия <html> до его закрытия. Если внешний JavaScript-файл размещается непосредственно перед закрывающим тегом </body>, то использование async и defer становится менее уместным, так как парсер к тому времени уже разберёт большую часть документа, и JavaScript-файлы уже не будут оказывать воздействие на него.

Скрипт самодостаточен?

Для файлов, которые не зависят от других файлов и/или не имеют никаких зависимостей, атрибут async будет наиболее полезен. Поскольку нам не важно, когда файл будет исполнен, асинхронная загрузка — наиболее подходящий вариант.

Полагается ли скрипт на полностью разобранный DOM?

Во многих случаях файл скрипта содержит функции, взаимодействующие с DOM. Или, возможно, существует зависимость от другого файла на странице. В таких случаях DOM должен быть полностью разобран, прежде чем скрипт будет выполнен. Как правило, такой файл помещается в низ страницы, чтобы убедиться, что для его работы всё было разобрано. Однако, в ситуации, когда по каким-либо причинам файл должен быть размещён в другом месте — атрибут defer может быть полезен.

Скрипт небольшой и зависим?

Наконец, если скрипт является относительно небольшим и/или зависит от других файлов, то, возможно, стоит определить его инлайново. Несмотря на то, что встроенный код блокирует разбор HTML-документа, он не должен сильно помешать, если его размер небольшой. Кроме того, если он зависит от других файлов, может понадобиться незначительная блокировка.

Поддержка и современные браузерные движки

Поддержка атрибутов async и defer очень распространена:

Стоит отметить, что поведение этих атрибутов может немного отличаться в разных движках JavaScript. Например, в V8 (используется в Chromium), сделана попытка разобрать все скрипты, независимо от их атрибутов, на отдельном выделенном потоке для выполнения скрипта. Таким образом, «блокирующая парсер» природа JavaScript-файлов должна быть минимизирована по умолчанию.

3 способа установить значение по умолчанию в JavaScript

Я всегда использовал тернарный оператор для условного присвоения значения переменной. Но с тех пор, как я обнаружил, что «||» может использоваться как оператор селектора, я использовал его чаще. Мне мой код намного легче читать 👍

Да, нужно время, чтобы понять его. Но как только вы поймете концепцию, это будет очень удобно. Теперь я не думаю, что меньшее количество кода делает ваш код лучше. Но в данном случае я предпочитаю || Оператор 🤩

• Понимание || Оператор
  • Использование значения по умолчанию в качестве функционального параметра
  • Ложные значения
• По сравнению с оператором &&
• Что такое оператор Элвиса
• Когда использовать какой?
• Ресурсы

Понимание

|| Оператор

Я уверен, что большинство из вас думало, что || используется только для логических проверок, например:

НО! Вы также можете использовать его для оценки выбранного выражения и получения значения. И именно поэтому полезно думать о логическом операторе как о оператор селектора . Когда он используется с небулевыми значениями, || Оператор вернет нелогическое значение одного из указанных выражений или операндов.

Взрыв головы еще?! Не беспокойтесь, позвольте мне объяснить это так, как объясняет Кайл Симпсон. Он является автором бесплатной электронной книги «Вы не знаете JavaScript».

Значение, полученное оператором && или || оператор не обязательно имеет тип Boolean. Полученное значение всегда будет значением одного из двух выражений операнда.

Хорошо, давайте рассмотрим пример.

Пока 1-е выражение (слева) истинно, оно всегда будет выбрано. Однако, если 1-е выражение (слева) всегда ложно, то 2-е выражение (справа) будет по умолчанию выводиться. И именно поэтому этот || известен как оператор для установки значений по умолчанию.

Использование значения по умолчанию в качестве параметра функции

Довольно часто можно увидеть || используется так:

Примечание: это больше не рекомендуется. Это намного лучше параметров ES6 по умолчанию. Потому что довольно часто вы можете не захотеть, чтобы значение по умолчанию срабатывало для ВСЕХ ложных значений — я объясню ложные значения в следующем разделе. Скорее всего, мы хотим, чтобы значение по умолчанию было установлено только в том случае, если в качестве аргумента не передается значение или undefined .

Лучшее решение с параметрами по умолчанию ES6

Ложные значения

В || , второе выражение (правая часть) оценивается только в том случае, если первое выражение (левая сторона). Итак, давайте проверим, что представляет собой ложное значение.

(Я написал еще одну запись в блоге о ложных значениях, которую вы можете прочитать здесь)

По сравнению с оператором

&&

В моем предыдущем посте я писал об операторе && . (Читайте здесь). && также известен как Guard Operator . Итак, вот краткий обзор различий:

• || : Всегда выводится 1-е выражение. Второе выражение выводится только в том случае, если первое выражение ложно.

• && : 1-е выражение выводится, если оно ЛОЖЬ. Второе выражение выводится только в том случае, если первое выражение истинно.

Что такое оператор Элвиса

Это интересно. В JavaScript у нас есть || для установки значений по умолчанию. В других языках, таких как C++ , это поведение аналогично оператору Элвиса , который обозначается как ?: .

Относительно того, почему он называется оператором Элвиса:

Изображение предоставлено GlobalNerdy.com

Когда использовать какой?

Теперь, когда вы понимаете Falsy Values ​​ , давайте выясним, какой из трех способов лучше использовать.

🏆Логический оператор ||

Это замечательно, если вы хотите зафиксировать все ложные значения. Это меньше кода и его легче читать. При условии, что все понимают все три типа поведения, конечно.

ПРИМЕЧАНИЕ. Я не говорю, что чем меньше кода, тем лучше, можно легко переусердствовать и сократить код, который сделает его нечитаемым. Мы пишем код для других, это форма общения. Всегда лучше выбрать вариант, который передает понимание, а не ум.

🏆Тернарный оператор

Допустим, мы не хотим захватывать ВСЕ ложные значения. И мы хотим, чтобы значение по умолчанию срабатывало только тогда, когда оно равно undefined

🏆If/Else

Это вариант с элементом управления MOST. И это то, на что я бы обязательно пошел, если, скажем, мне нужно выполнить дополнительное действие.

Ресурсы

• Веб-документы MDN — логические операторы
• YDKJS: Types & Grammer
• Википедия — Оператор Элвиса
• Переполнение стека — Сравнение тернарного оператора, оператора Элвиса, оператора безопасной навигации и логических операторов ИЛИ
• Переполнение стека — Логическое или против тернарного оператора
• Оператор по умолчанию в JavaSctipt и примерах из реальной жизни
• SamanthaMing. com — Guard Operator

3 способа установить значение по умолчанию в JavaScript

Я всегда использовал тернарный оператор для условного присвоения значения переменной. Но с тех пор, как я обнаружил, что «||» может использоваться как оператор селектора, я использовал его чаще. Я считаю, что мой код намного легче читать 👍

Да, нужно время, чтобы понять это. Но как только вы поймете концепцию, это будет очень удобно. Теперь я не думаю, что меньшее количество кода делает ваш код лучше. Но в данном случае я предпочитаю || Оператор 🤩

• Понимание || Оператор
  • Использование значения по умолчанию в качестве функционального параметра
  • Ложные значения
• По сравнению с оператором &&
• Что такое оператор Элвиса
• Когда использовать какой?
• Ресурсы

Понимание

|| Оператор

Я уверен, что большинство из вас думало, что || используется только для логических проверок, например:

НО! Вы также можете использовать его для оценки выбранного выражения и получения значения. Вот почему полезно думать о логическом операторе как об операторе селектора . Когда он используется с небулевыми значениями, || Оператор вернет нелогическое значение одного из указанных выражений или операндов.

Взрыв головы еще?! Не беспокойтесь, позвольте мне объяснить это так, как объясняет Кайл Симпсон. Он является автором бесплатной электронной книги «Вы не знаете JavaScript».

Значение, полученное оператором && или || оператор не обязательно имеет тип Boolean. Полученное значение всегда будет значением одного из двух выражений операнда.

Хорошо, давайте рассмотрим пример.

Пока 1-е выражение (слева) истинно, оно всегда будет выбрано. Однако, если 1-е выражение (слева) всегда ложно, то 2-е выражение (справа) будет по умолчанию выводиться. И поэтому это || известен как оператор для установки значений по умолчанию.

Использование значения по умолчанию в качестве параметра функции

Довольно часто можно увидеть || используется следующим образом:

Примечание: это больше не рекомендуется. Это намного лучше параметров ES6 по умолчанию. Потому что довольно часто вы можете не захотеть, чтобы значение по умолчанию срабатывало для ВСЕХ ложных значений — я объясню ложные значения в следующем разделе. Скорее всего, мы хотим, чтобы значение по умолчанию было установлено только в том случае, если нет значения или undefined передается в качестве аргумента.

Лучшее решение с параметрами по умолчанию ES6

Ложные значения

В || , второе выражение (правая часть) оценивается только в том случае, если первое выражение (левая сторона). Итак, давайте проверим, что представляет собой ложное значение.

(я написал еще одну запись в блоге о ложных значениях, которую вы можете прочитать здесь)

По сравнению с оператором

&&

В предыдущем посте я писал про оператор && . (Читайте здесь). && также известен как Guard Operator . Итак, вот краткий обзор различий:

• || : Всегда выводится 1-е выражение. Второе выражение выводится только в том случае, если первое выражение ложно.

• && : 1-е выражение выводится, если оно ЛОЖЬ. Второе выражение выводится только в том случае, если первое выражение истинно.

Что такое оператор Элвиса

Это интересно. В JavaScript у нас есть || для установки значений по умолчанию. В других языках, таких как C++ , это поведение аналогично оператору Элвиса , который обозначается как ?: .

Что касается того, почему он называется Elvis Operator:

Изображение предоставлено GlobalNerdy.com

Когда использовать какой?

Теперь, когда вы понимаете Falsy Values ​​ , давайте разберемся какой способ из 3-х лучше использовать.

🏆Логический оператор ||

Это замечательно, если вы хотите зафиксировать все ложные значения.