В чём разница между событиями window load и DOMContentLoaded?

Question

DOMContentLoaded срабатывает, когда HTML полностью загружен и разобран, но внешние ресурсы (картинки, стили, скрипты) могут ещё загружаться. window load ждёт полной загрузки всех ресурсов, включая изображения и фреймы. Обычно DOMContentLoaded наступает раньше. Для манипуляций с DOM достаточно DOMContentLoaded, а для проверки размеров картинок или работы с ресурсами — load.

YeaHub · Accepted Answer

Основная идеяКогда браузер открывает страницу, он проходит несколько этапов: получает HTML, разбирает его в DOM-дерево, загружает внешние ресурсы (CSS, JS, изображения) и только потом полностью отображает страницу. События DOMContentLoaded и load сигнализируют о разных моментах этого процесса.DOMContentLoadedЭто событие срабатывает, когда HTML-документ полностью загружен и разобран, то есть DOM-дерево готово. При этом внешние ресурсы, такие как картинки, стили и фреймы, могут ещё загружаться. Это идеальный момент для подключения обработчиков событий, изменения DOM или инициализации логики, которая не зависит от внешних файлов.document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM готов, можно работать с элементами');
  document.getElementById('app').innerHTML = 'Привет';
});window loadСобытие load на объекте window срабатывает только после того, как загружены все ресурсы страницы: изображения, стили, скрипты, фреймы. Это нужно, когда вы хотите измерить размеры картинки, получить доступ к данным, которые зависят от полной загрузки, или выполнить действия, требующие всех ресурсов.window.addEventListener('load', function() {
  console.log('Все ресурсы загружены');
  const img = document.querySelector('img');
  console.log('Размер картинки:', img.naturalWidth, img.naturalHeight);
});Практическое применениеЕсли вы подключаете скрипт в <head> и хотите манипулировать DOM, используйте DOMContentLoaded — это быстрее и не блокирует загрузку страницы.Если нужно дождаться загрузки всех изображений для галереи или слайдера, используйте load.Для аналитики или трекинга часто используют load, чтобы гарантировать, что страница полностью отобразилась.ВыводВыбирайте DOMContentLoaded для работы с DOM и логики, не зависящей от ресурсов, а load — когда нужны все внешние файлы. Это помогает оптимизировать скорость и корректность работы приложения.

В чём разница между событиями window load и DOMContentLoaded?

Короткий ответ

Длинный ответ

Основная идея

DOMContentLoaded

window load

Практическое применение

Вывод

В чём разница между событиями window load и DOMContentLoaded?

Короткий ответ

Длинный ответ

Основная идея

DOMContentLoaded

window load

Практическое применение

Вывод