DomContentLoaded: как ускорить загрузку страницы

DOMContentLoaded - это событие, которое происходит после полной загрузки документа HTML, когда все его элементы были построены и готовы для манипулирования через JavaScript.

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

Пример использования DOMContentLoaded:

document.addEventListener('DOMContentLoaded', function() {

console.log('DOM fully loaded and parsed');

// Здесь можно вызвать функции, которые манипулируют DOM-элементами

});

Этот код добавляет слушатель события DOMContentLoaded на объект document. Когда событие происходит, функция обработчика вызывается, и в консоль выводится сообщение. Внутри этой функции, можно вызвать другие функции, которые могут выполнять манипуляции с DOM-элементами.

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