Можешь объяснить ключевые различия между событием `DOMContentLoaded` и событием `window.onload`, и описать, когда бы ты использовал каждое из них в веб-приложении?

Обзор

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

DOMContentLoaded

Событие DOMContentLoaded срабатывает, как только браузер полностью разобрал HTML и построил DOM-дерево — не дожидаясь загрузки внешних ресурсов: изображений, стилей или iframe'ов.

• Используй это, когда твой код только читает или изменяет элементы DOM
• Срабатывает раньше, что положительно сказывается на воспринимаемой производительности
• Предпочтительный вариант для большинства задач инициализации DOM

window.onload

Событие window.onload срабатывает только после полной загрузки всех ресурсов страницы: изображений, стилей, шрифтов и iframe'ов.

• Используй это, когда твой код зависит от полностью загруженных ресурсов — например, при чтении размеров изображений или canvas-рендеринге
• Срабатывает позже, чем DOMContentLoaded, поэтому без необходимости его лучше не использовать

Когда использовать каждое

• Используй DOMContentLoaded для навешивания обработчиков событий, инициализации UI-компонентов или работы с DOM — это покрывает большинство случаев
• Используй window.onload только когда тебе явно нужны полностью загруженные внешние ресурсы — например, для расчёта размеров элементов разметки на основе размеров изображений

Ключевой вывод

По умолчанию используй DOMContentLoaded — это даёт лучшую производительность. Переходи на window.onload только когда твоя логика действительно зависит от полностью загруженных внешних ресурсов.