Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

События документа JS: DOM API

Кроме событий, которые возникают в ответ на действия пользователей, существует ряд событий, которые привязаны к работе самого браузера. К таким событиям относятся события на загрузку и выгрузку страницы:

  • DOMContentLoaded – DOM-дерево полностью построено и готово к работе
  • load – все ресурсы загружены (картинки, стили, скрипты, ...)
  • beforeunload – возникает, когда пользователь пытается уйти со страницы

DOMContentLoaded — важное событие, которое часто используется в коде зависящим от DOM. Оно помогает избежать ошибок, связанных с тем, что скрипты могут начать выполняться до того, как готов DOM, от которого они зависят. В таком случае возникнут ошибки.

Это событие привязано к document:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Если бы DOM не был готов, мы бы ничего не нашли
    const coll = document.querySelectorAll('.help');
    coll.forEach((el) => el.classList.add('hidden'));
  });
</script>

Скорость построения DOM дерева очень зависима от тегов <script>. По стандарту любой <script>, встреченный в HTML, будет выполняться до полного построения дерева, а значит, скорость отработки кода в этом блоке <script> будет сильно влиять на то, когда пользователь увидит сам сайт, и на то, когда сработает событие DOMContentLoaded.

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

Network

Обратите внимание на красную и синюю полоску. Красная показывает момент, когда сработало событие load, а синяя — DOMContentLoaded. Внизу картинки указано время срабатывания каждого события от начала загрузки страницы. Из картинки видно, что браузер сначала скачивает саму страницу (ее html), затем извлекает из нее ссылки на все внешние ресурсы и начинает их загрузку. Для большей эффективности скачивание ресурсов идет параллельно настолько, насколько это возможно.


Дополнительные материалы

  1. Как управлять загрузкой скриптов через async и defer?

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов для веб-приложений
6 октября 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
6 октября 16 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»