load и DOMContentLoaded

Если нужно запустить JavaScript-код после того, как страница загрузилась, то нужно подписаться на одно из событий у объекта window:

• DOMContentLoaded — событие происходит, когда браузер разобрал HTML-страницу и составил DOM-дерево;
• load — событие происходит, когда загрузилась и HTML страница, и все ресурсы для её отображения пользователю: стили, картинки и так далее.

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

        
          
          window.addEventListener("load", function () {  console.log("load!")})// это событие можно обрабатывать так же и на documentwindow.addEventListener("DOMContentLoaded", function () {  console.log("dom loaded!")})
          window.addEventListener("load", function () {
  console.log("load!")
})

// это событие можно обрабатывать так же и на document
window.addEventListener("DOMContentLoaded", function () {
  console.log("dom loaded!")
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Для того, чтобы показать пользователю страницу, браузер делает следующие шаги:

1. Запрашивает HTML-страницу с сервера;
2. Обрабатывает полученный HTML и создаёт DOM для взаимодействия между JavaScript и HTML (☝️ в конце этого этапа происходит событие DOMContentLoaded);
3. Запрашивает у сервера дополнительные файлы, встретившиеся при разборе HTML: картинки, шрифты, CSS- и JS-файлы;
4. Получив все данные, отображает страницу пользователю (☝️ тут происходит событие load).

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

Событие load дополнительно гарантирует, что все стили и картинки готовы. В этот момент размеры элементов на страницы посчитаны верно и доступны. DOMContentLoaded таких гарантий не даёт.

На практике

Секция статьи "На практике"

nlopin

Секция статьи "nlopin"

🛠 Чаще всего используется DOMContentLoaded

🛠 Основной сценарий использования DOMContentLoaded: инициализация интерфейса и первые обращения к серверу

🛠 Нормальной практикой считается запуск всего приложения в момент срабатывания DOMContentLoaded, таким образом исключается случай, когда DOM ещё не догрузился, а приложение уже ищет по нему узлы.

🛠 Событие load используется, когда код работает со стилями и другими параметрами отображения. Такой код нужен редко, поэтому и событие используется нечасто.