Использование отсрочки и асинхронности для ограничения эффектов блокировки скриптов в JavaScript

JSByte (серия из 12 частей)

1JSByte: преобразование типов в JavaScript

2Макет DOM: как получить ширину и высоту элементов DOM.

3JSByte: обработчики событий JavaScript

4JSByte: как проверить ложные значения с нулевым или неопределенным значением в JavaScript

5JSByte: как использовать fetch API для выполнения запросов AJAX в JavaScript?

6JSByte: объяснение заголовка Access-Control-Allow-Origin

7Пример кодирования URL-адреса JavaScript — как использовать encodeURIcomponent() и encodeURI()

8JSByte: JavaScript Array Slice vs Splice: разница, объясненная с помощью Cake

9JSByte: Объяснение необязательных цепочек JavaScript ?. – как это работает и когда его использовать

10Использование отсрочки и асинхронности для ограничения эффектов блокировки скриптов в JavaScript

11Проверка формы JavaScript — как проверить ввод пользователя в HTML-формы с помощью примера кода JS

12Полезные бесплатные и платные ресурсы для веб-разработчиков, чтобы оставаться в курсе

В блокирующем или синхронном режиме браузер ожидает полного завершения загрузки скрипта, прежде чем выполнять какой-либо код после него.
Таким образом, в этом случае script2.jsнельзя начать загрузку до script1.jsзавершения загрузки.

Как вы понимаете, это становится проблематичным, когда:

1. script2нужны переменные, которые находятся вscript1
2. script1действительно огромен, и вся страница должна ждать завершения загрузки скрипта.

Браузер ожидает завершения сценария, так как предполагает, что в сценарии может быть код, который может обновлять содержимое страницы с помощью document.write. Если ваш скрипт не использует document.write, то ожидание завершения загрузки браузера бесполезно.

Чтобы обойти это, можно использовать два атрибута — deferи async.

1. defer: defer сообщает браузеру, что скрипт не будет генерировать содержимое документа и может быть безопасно загружен без блокировки страницы, и этот скрипт следует отложить до тех пор, пока не будет загружена вся страница. defer выполняется только тогда, когда страница полностью проанализирована.
2. async: asyncпохож на defer в том смысле, что он ничего не меняет в DOM, но в отличие от defer, асинхронные скрипты выполняются сразу после их загрузки. Это удобно, потому что сценарии потенциально могут выполняться раньше.

Синтаксис –

---

TL;DR
Блокирующие скрипты могут замедлять работу страницы. Используйте deferили asyncдля ограничения эффектов блокирующего скрипта. deferи asyncскрипты не должны изменять содержимое страницы с помощью document.write.

1. defer: defer выполняется только тогда, когда страница полностью проанализирована.
2. async: асинхронные скрипты выполняются сразу после загрузки

---

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

Источник статьи: http://dev.to/