Поймите, как браузер работает и анализирует веб-файлы, такие как 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.
Спасибо за прочтение 😊