QUESTION: Що таке DOMContentLoaded і load?

Події DOMContentLoaded і load відіграють ключову роль у життєвому циклі завантаження вебсторінки, і розуміння різниці між ними є критично важливим для фронтенд-розробника. Подія DOMContentLoaded спрацьовує на об'єкті document тоді, коли HTML повністю завантажено і розібрано, а дерево DOM повністю побудоване. При цьому браузер не чекає на завантаження стилів, зображень і фреймів, що підвантажуються. Це робить DOMContentLoaded ідеальним моментом для ініціалізації інтерактивних елементів інтерфейсу, навішування обробників подій і виконання базової логіки скриптів, яким не потрібні розміри зображень.

Подія load, зі свого боку, спрацьовує на об'єкті window трохи пізніше, коли повністю завантажено не лише HTML і DOM-дерево, а й усі супутні ресурси: таблиці стилів, скрипти, зображення та сторонні фрейми. Оскільки завантаження важкої графіки може зайняти помітний час, load відбувається значно пізніше, ніж DOMContentLoaded.

На практиці DOMContentLoaded спрацьовує набагато швидше, що дозволяє покращити сприйману користувачем швидкість роботи сайту. Щоб скрипти виконувалися вчасно і не блокували відмальовування сторінки, часто використовують атрибут defer для тегу script, який вказує браузеру завантажувати скрипт асинхронно у фоні та виконувати його одразу після того, як DOMContentLoaded буде завершено.

Для перевірки поточного стану завантаження документа в будь-який момент часу можна використовувати властивість document.readyState. Вона приймає три можливі значення: loading, коли документ ще завантажується; interactive, коли документ повністю прочитано і розібрано (що відповідає моменту перед подією DOMContentLoaded); та complete, коли всі ресурси повністю завантажені (що відповідає моменту перед подією load). Цю властивість зручно використовувати в універсальних функціях, які повинні виконуватися незалежно від того, чи встиг документ завантажитися до підключення скрипта.