Чем отличаются события `load` и `DOMContentLoaded`?

Коротко

Примеры

document.addEventListener("DOMContentLoaded", () => {
  // можно искать элементы и вешать UI
  initApp();
});

window.addEventListener("load", () => {
  // метрики полной загрузки, работа с размерами картинок
  console.log("all resources done");
});

document.readyState: loading → interactive (≈ DOM готов) → complete (≈ load).

Что выбрать

• Инициализация UI / querySelector — чаще DOMContentLoaded (или модуль в конце body / type=module — DOM уже часто доступен).
• Нужны натуральные размеры изображений / «всё доехало» — load.

Итог: DOMContentLoaded — «дерево есть»; load — «дерево + ресурсы догрузились».