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

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

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

DOMContentLoaded возникает в тот момент, когда DOM дерево полностью построено и готово к работе, но при этом стили, скрипты и картинки могут находиться в процессе загрузки.

Это событие происходит на document:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const coll = document.querySelectorAll('.help');
    [...coll].forEach((el) => el.classList.add('hidden'));
  });
</script>

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

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

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

Network

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


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
120
курсов
900
упражнения
2000+
часов теории
3200
тестов

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

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

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

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

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Рекомендуемые программы

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

Иконка программы Фронтенд-разработчик
Профессия

Фронтенд-разработчик

Разработка фронтенд-компонентов веб-приложений
16 июня 8 месяцев

Есть вопрос или хотите участвовать в обсуждении?

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

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».