Поймите, как браузер работает и анализирует веб-файлы, такие как HTML, CSS и JS. Изучение работы ASYNC и DEFER.

Здравствуйте, разработчики!
В настоящее время Javascript является неотъемлемой частью любой базовой/современной разработки веб-приложений.
В этой статье мы узнаем, как браузер загружает файлы HTML и Javascript, анализирует и запускает страницу для загрузки в браузер.

Итак, во-первых, мы узнаем, как браузер загружает HTML-документ.

Как браузер анализирует HTML

Итак, во-первых, мы узнаем, как браузер загружает документ HTML.
Когда мы заходим на веб-сайт, он загружает файл index.html и анализирует направление сверху вниз.
поэтому он анализирует HTML построчно. и всякий раз, когда появляется тег <script>, он приостанавливает синтаксический анализ HTML и продолжает анализировать код Javascript и выполнять его.
После завершения кода Javascript он возобновляет оставшийся синтаксический анализ HTML.

Это происходит в обычных случаях, если мы просто пишем тег скрипта в обычном режиме.
<script src=”app.js”></script>

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

АСИНХРОНИЧЕСКИЙ Атрибут

Атрибут async позволяет файлу Javascript работать асинхронно.

Итак, во-первых, когда мы заходим на веб-сайт, он загружает файл index.html.
Итак, он начинает анализировать HTML, а также параллельно извлекает файлы Javascript с атрибутом ASYNC.

Однако соответствующий скрипт будет проанализирован и выполнен, как только завершится загрузка, независимо от того, был ли завершен синтаксический анализ HTML, и до этого момента будет иметь ссылку на элемент DOM.

Напишите тег script, как показано ниже:

<script src=”app.js” async></script>

в файле ASYNC последовательность выполнения JS не сохраняется.

Таким образом, это означает, что в режиме ASYNC браузер не ждет этого JS-файла, и выполнение продолжается. Итак, нашу страницу не блокируют.

Асинхронные скрипты хороши, когда мы интегрируем в страницу независимый сторонний скрипт: счетчики, рекламу, инструменты аналитики и так далее, так как они не зависят от наших скриптов, а наши скрипты не должны их ждать.

ОТЛОЖИТЬ Атрибут

Атрибуты сценария отсрочки аналогичны атрибуту Async, за исключением того, что соответствующие сценарии анализируются и выполняются ТОЛЬКО после завершения анализа HTML.

In Defer the Browser Выбирает сценарий во время параллельного рендеринга HTML, но выполняет javascript после завершения рендеринга всего HTML.

Напишите свой тег script, как показано ниже:

<script src=”app.js” defer></script>

Последовательность импорта скрипта будет сохранена в DEFER. поэтому он иногда блокирует страницу.

Заключение

Итак, есть 2 полезных атрибута для загрузки файла javascript в браузер.

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

Например,
когда другой файл JS не зависит от какой-либо цели пользовательского интерфейса или сторонних js, мы можем определить вкладку скрипта как ASYNC и повысить производительность в Интернете. например, Google Analytics.

Но когда нам нужна библиотека в качестве зависимости для нашего веб-приложения, мы можем написать тег скрипта в обычном режиме или с использованием атрибута DEFER.

Спасибо за прочтение 😊