0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Мы уже знакомы с событиями, которые возникают в ответ на действия пользователей. Но еще существует ряд событий, которые привязаны к работе самого браузера. К таким событиям относятся события на загрузку и выгрузку страницы:</p>
1
<p>Мы уже знакомы с событиями, которые возникают в ответ на действия пользователей. Но еще существует ряд событий, которые привязаны к работе самого браузера. К таким событиям относятся события на загрузку и выгрузку страницы:</p>
2
<ul><li>beforeunload - пользователь пытается уйти со страницы</li>
2
<ul><li>beforeunload - пользователь пытается уйти со страницы</li>
3
<li>load - все ресурсы загружены (картинки, стили, скрипты и так далее)</li>
3
<li>load - все ресурсы загружены (картинки, стили, скрипты и так далее)</li>
4
<li>DOMContentLoaded - DOM-дерево полностью построено и готово к работе, без ожидания полной загрузки таблиц стилей, изображений и фреймов</li>
4
<li>DOMContentLoaded - DOM-дерево полностью построено и готово к работе, без ожидания полной загрузки таблиц стилей, изображений и фреймов</li>
5
</ul><p>О последнем поговорим подробнее. Это важное событие, которое часто используется в коде, зависящем от DOM.</p>
5
</ul><p>О последнем поговорим подробнее. Это важное событие, которое часто используется в коде, зависящем от DOM.</p>
6
<p>Иногда скрипты могут запускаться до того, как готов DOM, от которого они зависят. В таком случае возникают ошибки. Но если при этом использовать событие DOMContentLoaded, то ошибок можно избежать.</p>
6
<p>Иногда скрипты могут запускаться до того, как готов DOM, от которого они зависят. В таком случае возникают ошибки. Но если при этом использовать событие DOMContentLoaded, то ошибок можно избежать.</p>
7
<p>Это событие привязано к document:</p>
7
<p>Это событие привязано к document:</p>
8
<p>Скорость построения DOM-дерева во многом зависит от тегов <script>. По стандарту любой <script> в HTML будет выполняться до полного построения дерева. Это значит, что скорость отработки кода в этом блоке <script> будет сильно влиять на скорость загрузки сайта и на то, когда сработает событие DOMContentLoaded.</p>
8
<p>Скорость построения DOM-дерева во многом зависит от тегов <script>. По стандарту любой <script> в HTML будет выполняться до полного построения дерева. Это значит, что скорость отработки кода в этом блоке <script> будет сильно влиять на скорость загрузки сайта и на то, когда сработает событие DOMContentLoaded.</p>
9
<p>Тема оптимизации загрузки скриптов и быстрой инициализации достаточно сложна. Это связано не только с большим количеством факторов, влияющих на порядок и скорость, но также и с тем, что в разных браузерах этот механизм работает по-разному. Здесь мы не будем его разбирать, это тема продвинутого уровня, и по ней написано множество статей.</p>
9
<p>Тема оптимизации загрузки скриптов и быстрой инициализации достаточно сложна. Это связано не только с большим количеством факторов, влияющих на порядок и скорость, но также и с тем, что в разных браузерах этот механизм работает по-разному. Здесь мы не будем его разбирать, это тема продвинутого уровня, и по ней написано множество статей.</p>
10
<p>А пока мы рассмотрим такой скриншот:</p>
10
<p>А пока мы рассмотрим такой скриншот:</p>
11
<p>Обратите внимание на красную и синюю полоски. Красная показывает момент, когда сработало событие load, а синяя - DOMContentLoaded. Внизу картинки указано время срабатывания каждого события от начала загрузки страницы.</p>
11
<p>Обратите внимание на красную и синюю полоски. Красная показывает момент, когда сработало событие load, а синяя - DOMContentLoaded. Внизу картинки указано время срабатывания каждого события от начала загрузки страницы.</p>
12
<p>Из картинки видно, что браузер сначала скачивает HTML-файл страницы, затем извлекает из него ссылки на все внешние ресурсы и начинает их загрузку. Для большей эффективности скачивание ресурсов идет параллельно настолько, насколько это возможно.</p>
12
<p>Из картинки видно, что браузер сначала скачивает HTML-файл страницы, затем извлекает из него ссылки на все внешние ресурсы и начинает их загрузку. Для большей эффективности скачивание ресурсов идет параллельно настолько, насколько это возможно.</p>