Defer и Async эффективно загружают javascript. При загрузке скрипта на HTML-страницу необходимо соблюдать осторожность, чтобы не повредить производительность загрузки страницы. Время загрузки зависит от того, где и как мы добавляем ваши скрипты на HTML-страницу.
Сценарий традиционно включен на страницу, как показано ниже…
Всякий раз, когда синтаксический анализатор HTML находит эту строку, будет сделан запрос на получение сценария, и сценарий будет выполнен. Как только этот процесс будет завершен, синтаксический анализ может быть возобновлен, и остальная часть HTML может быть проанализирована.
Как вы понимаете, эта операция может иметь огромное влияние на время загрузки страницы. В случае, если мы используем тяжелый файл сценария, размер файла составляет 1 МБ, в этом случае пользователь может некоторое время получать пустую страницу, пока файл JS не будет проанализирован и загружен.
Позиционирование ‹script› имеет значение:
Как вы, возможно, знаете, при написании HTML-файла нам предлагается ввести все внешние файлы, такие как файлы JS и CSS, в тег HEAD.
Это плохо, потому что введено много задержек. Распространенным решением этой проблемы является размещение тега ‹script› в конце тега ‹body›.
Если мы это сделаем, скрипт загружается и выполняется после того, как вся страница уже проанализирована и загружена, что является огромным улучшением по сравнению с альтернативой head.
Это лучшее, что вы можете сделать, если вам нужна поддержка старых браузеров, которые не поддерживают две относительно недавние функции HTML: асинхронность и отсрочку.
Асинхронизация и отсрочка:
И Async, и Defer являются булевыми атрибутами. Их использование аналогично.
Сравнение производительности:
- Без отсрочки или асинхронности в голове:анализ приостанавливается до тех пор, пока скрипт не будет выбран и выполнен. Как только это будет сделано, синтаксический анализ возобновится.
2. Никакой отсрочки или асинхронности в теле: анализ выполняется без каких-либо пауз, и когда он заканчивается, скрипт загружается и выполняется. Парсинг выполняется еще до загрузки скрипта, поэтому страница появляется перед пользователем намного раньше предыдущей.
3. С асинхронностью в голове: сценарий загружается асинхронно, и когда он будет готов, синтаксический анализ HTML будет приостановлен для выполнения сценария, а затем возобновится.
4. С отсрочкой в голове: скрипт извлекается асинхронно и выполняется только после завершения синтаксического анализа HTML. Синтаксический анализ завершается точно так же, как если бы мы помещали скрипт в конец тега body, но общее выполнение скрипта завершается намного раньше, потому что скрипт был загружен параллельно с парсингом HTML.
Поддержание скриптов в порядке:
Существуют сценарии, когда порядок файлов сценариев имеет значение. И именно тогда мы должны решить, какое ключевое слово следует использовать — отложенное или асинхронное.
сценарии, помеченные как асинхронные, выполняются в случайном порядке, когда они становятся доступными. Скрипты, помеченные как defer, выполняются (после завершения синтаксического анализа) в том порядке, в котором они определены в разметке.
Лучший способ:
Лучшее, что можно сделать, чтобы ускорить загрузку страницы при использовании скриптов, — поместить их в заголовок и добавить атрибут defer в тег script:
