Разницу между атрибутами async и defer при подключении внешних скриптов в HTML документе.
🔹async
Когда вы используете атрибут async, браузер продолжает парсить HTML-документ, в то время как скрипт загружается в фоновом режиме. Как только скрипт загрузится, парсинг HTML приостанавливается, чтобы скрипт мог быть выполнен. Это может привести к тому, что скрипты будут выполняться не в том порядке, в котором они указаны в документе, если они зависят друг от друга.
🔹defer
Атрибут defer, с другой стороны, также позволяет браузеру продолжить парсинг HTML-документа во время загрузки скрипта. Однако, в отличие от async, он гарантирует, что скрипты будут выполнены в том порядке, в котором они появляются в документе, и только после полной загрузки HTML-документа, перед событием DOMContentLoaded.
🔍Визуально разницу можно представить так:
1️⃣Без async или defer: HTML → Скрипт загружается и выполняется → HTML продолжает загружаться.
2️⃣С async: HTML и скрипт загружаются параллельно → Скрипт выполняется, как только загрузится (HTML может ещё не быть полностью загружен).
3️⃣С defer: HTML и скрипт загружаются параллельно → Скрипт выполняется только после полной загрузки HTML (и в том порядке, в котором они указаны в документе).
🛠Использование:
Используйте async, когда скрипты независимы друг от друга и могут выполняться в любом порядке.
Используйте defer, когда скрипты зависимы друг от друга и должны выполняться в определенном порядке.
#JavaScript #ОбучающийПост #defer #async #HTML
🔹async
Когда вы используете атрибут async, браузер продолжает парсить HTML-документ, в то время как скрипт загружается в фоновом режиме. Как только скрипт загрузится, парсинг HTML приостанавливается, чтобы скрипт мог быть выполнен. Это может привести к тому, что скрипты будут выполняться не в том порядке, в котором они указаны в документе, если они зависят друг от друга.
🔹defer
Атрибут defer, с другой стороны, также позволяет браузеру продолжить парсинг HTML-документа во время загрузки скрипта. Однако, в отличие от async, он гарантирует, что скрипты будут выполнены в том порядке, в котором они появляются в документе, и только после полной загрузки HTML-документа, перед событием DOMContentLoaded.
🔍Визуально разницу можно представить так:
1️⃣Без async или defer: HTML → Скрипт загружается и выполняется → HTML продолжает загружаться.
2️⃣С async: HTML и скрипт загружаются параллельно → Скрипт выполняется, как только загрузится (HTML может ещё не быть полностью загружен).
3️⃣С defer: HTML и скрипт загружаются параллельно → Скрипт выполняется только после полной загрузки HTML (и в том порядке, в котором они указаны в документе).
🛠Использование:
Используйте async, когда скрипты независимы друг от друга и могут выполняться в любом порядке.
Используйте defer, когда скрипты зависимы друг от друга и должны выполняться в определенном порядке.
#JavaScript #ОбучающийПост #defer #async #HTML
👍4
Множественные асинхронные запросы
Бывают случаи когда вам необходимо сделать много разных запросов на сервер и получить данные. Есть разные варианты для реализации этого:
Использование Async/Await:
- Последовательное выполнение запросов.
- Каждый запрос выполняется один за другим.
- Полезно, когда второй запрос зависит от результата первого.
Использование Promise.all:
- Параллельное выполнение всех запросов.
- Оптимально для независимых запросов, когда порядок не важен.
- Если один из промисов отклоняется, весь Promise.all отклоняется.
Использование Promise.allSettled:
-Также выполняет запросы параллельно.
-Возвращает результаты всех запросов, включая успешные и неудачные.
-Полезно для обработки ситуаций, когда нужен результат каждого запроса, независимо от успеха или неудачи.
Использование Цикла For...Of с Async/Await:
-Последовательное выполнение запросов для каждого элемента в массиве.
-Подходит для сценариев, где требуется обрабатывать элементы массива по очереди.
#JavaScript #обучающийПост #promise #async
Бывают случаи когда вам необходимо сделать много разных запросов на сервер и получить данные. Есть разные варианты для реализации этого:
Использование Async/Await:
- Последовательное выполнение запросов.
- Каждый запрос выполняется один за другим.
- Полезно, когда второй запрос зависит от результата первого.
Использование Promise.all:
- Параллельное выполнение всех запросов.
- Оптимально для независимых запросов, когда порядок не важен.
- Если один из промисов отклоняется, весь Promise.all отклоняется.
Использование Promise.allSettled:
-Также выполняет запросы параллельно.
-Возвращает результаты всех запросов, включая успешные и неудачные.
-Полезно для обработки ситуаций, когда нужен результат каждого запроса, независимо от успеха или неудачи.
Использование Цикла For...Of с Async/Await:
-Последовательное выполнение запросов для каждого элемента в массиве.
-Подходит для сценариев, где требуется обрабатывать элементы массива по очереди.
#JavaScript #обучающийПост #promise #async
👍8👨💻3❤1✍1
Асинхронный код в JavaScript
Асинхронный код в JavaScript — это механизм, позволяющий программе продолжать выполнение, не дожидаясь завершения длительной операции. Это ключевая особенность языка, делающая его мощным инструментом для разработки веб-приложений, где множество задач может выполняться одновременно, не блокируя главный поток исполнения.
Основные моменты, которые нужно понимать о асинхронном коде:
Синхронный vs Асинхронный: Синхронный код выполняется последовательно, каждая строка дожидается завершения предыдущей, прежде чем начать исполнение. Асинхронный код позволяет перейти к следующей задаче, не завершая текущую.
Event Loop: Это цикл событий, который позволяет JavaScript выполнять асинхронные задачи после завершения всех синхронных. Он следит за тем, чтобы асинхронные операции возвращались в главный поток для выполнения, как только они будут готовы.
Микрозадачи и Макрозадачи: JavaScript разделяет асинхронные задачи на два типа — микрозадачи (например, обещания (Promises)) и макрозадачи (например, таймеры, ввод/вывод). Микрозадачи обрабатываются сразу после текущего синхронного кода и перед любыми макрозадачами, делая их приоритетными.
Promises: Обещания (Promises) — это объекты, представляющие будущий результат асинхронной операции. Они позволяют управлять асинхронным кодом более удобно, чем через колбэки, предоставляя методы для обработки успешного выполнения и возникновения ошибок.
#promise #JavaScript #async
Асинхронный код в JavaScript — это механизм, позволяющий программе продолжать выполнение, не дожидаясь завершения длительной операции. Это ключевая особенность языка, делающая его мощным инструментом для разработки веб-приложений, где множество задач может выполняться одновременно, не блокируя главный поток исполнения.
Основные моменты, которые нужно понимать о асинхронном коде:
Синхронный vs Асинхронный: Синхронный код выполняется последовательно, каждая строка дожидается завершения предыдущей, прежде чем начать исполнение. Асинхронный код позволяет перейти к следующей задаче, не завершая текущую.
Event Loop: Это цикл событий, который позволяет JavaScript выполнять асинхронные задачи после завершения всех синхронных. Он следит за тем, чтобы асинхронные операции возвращались в главный поток для выполнения, как только они будут готовы.
Микрозадачи и Макрозадачи: JavaScript разделяет асинхронные задачи на два типа — микрозадачи (например, обещания (Promises)) и макрозадачи (например, таймеры, ввод/вывод). Микрозадачи обрабатываются сразу после текущего синхронного кода и перед любыми макрозадачами, делая их приоритетными.
Promises: Обещания (Promises) — это объекты, представляющие будущий результат асинхронной операции. Они позволяют управлять асинхронным кодом более удобно, чем через колбэки, предоставляя методы для обработки успешного выполнения и возникновения ошибок.
#promise #JavaScript #async
🔥9👍4👌4❤1