Разница между DOMContentLoaded и событиями загрузки

Question

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

Answer 1

Из Центра разработчиков Mozilla:

Событие DOMContentLoaded наступает, когда документ полностью загружен и проанализирован, не дожидаясь окончания загрузки таблиц стилей, изображений и подкадров (событие load может использоваться для обнаружения полностью загруженной страницы).

Answer 2

DOMContentLoaded событие сработает, как только иерархия DOM будет полностью построена, load Событие сделает это, когда все изображения и субкадры закончат загрузку.

DOMContentLoaded будет работать в большинстве современных браузеров, но не в IE, включая IE9 и выше. Есть некоторые обходные пути для имитации этого события в более старых версиях IE, например, используемые в библиотеке jQuery, они прикрепляют специфичные для IE onreadystatechange событие.

Answer 3

Смотри разницу сами:

DEMO

От Microsoft IE

Событие DOMContentLoaded возникает, когда анализ текущей страницы завершен; событие загрузки срабатывает после завершения загрузки всех файлов со всех ресурсов, включая рекламу и изображения. DOMContentLoaded - отличное событие для подключения функциональности пользовательского интерфейса к сложным веб-страницам.

Из Сети разработчиков Mozilla

Событие DOMContentLoaded наступает, когда документ полностью загружен и проанализирован, не дожидаясь окончания загрузки таблиц стилей, изображений и подкадров (событие load может использоваться для обнаружения полностью загруженной страницы).

Answer 4

DOMContentLoaded==window.onDomReady()

Load==window.onLoad()

Страницей нельзя безопасно управлять, пока документ не "готов". JQuery обнаруживает это состояние готовности для вас. Код, включенный в $( document).ready(), будет выполняться только после того, как страница объектной модели документа (DOM) будет готова для выполнения кода JavaScript. Код, включенный в $ (window).load (function () {...}), будет запущен, когда будет готова вся страница (изображения или iframes), а не только DOM.

Смотрите: http://learn.jquery.com/using-jquery-core/document-ready/

Answer 5

Для полного понимания рекомендую прочитать следующие статьи:

1. Что такое DOM и CSSOM: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model
2. Что такое дерево рендеринга: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction
3. Как все связано с DOMContentLoaded, загрузкой и первой печатью:https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

Вкратце :

Событие запускается при создании (см. Ссылку 1 для получения дополнительной информации), а событие запускается, когда загружаются, и все другие ресурсы. Если у вас нет Javascript, то порядок загрузки вашей веб-страницы может выглядеть следующим образом:

Или, говоря словами инспекционного окна, событие будет запущено намного раньше, чем событие (синяя линия представляет, красная линия представляет событие):

Однако, если вы используете Javascript (который не является асинхронным или отложенным), тогда DOMсоздание будет ждать загрузки JS. Поскольку JS также изменяет CSS, JS будет ждать CSSOM загружать.

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

Цепочка погрузки тогда выглядит так:

Итак, основное различие между DOMContentLoaded а также load в этой ситуации - это только время загрузки изображения, которое может быть загружено параллельно с вашими таблицами стилей и JS.

Не то чтобы этого не произошло, если вы используете async или defer для своего JS:

Answer 6

• domContentLoaded: отмечает точку, когда DOM готов, и нет таблиц стилей, которые блокируют выполнение JavaScript - это означает, что теперь мы можем (потенциально) построить дерево рендеринга. Многие фреймворки JavaScript ждут этого события, прежде чем начнут выполнять свою собственную логику. По этой причине браузер фиксирует временные метки EventStart и EventEnd, чтобы позволить нам отслеживать, сколько времени заняло это выполнение.

• loadEvent: на последнем этапе загрузки каждой страницы браузер запускает событие "onload", которое может вызвать дополнительную логику приложения.

источник

Answer 7

Вот код, который нам подходит. Мы обнаружили, что MSIE постоянно поражаетDomContentLoaded, кажется, есть некоторая задержка, когда никакие дополнительные ресурсы не кэшируются (до 300 мс на основе нашего журнала консоли), и срабатывает слишком быстро, когда они кэшируются. Поэтому мы прибегли к резервному варианту MISE. Вы также хотите вызватьdoStuff() функционировать ли DomContentLoaded срабатывает до или после ваших внешних файлов JS.

// detect MSIE 9,10,11, but not Edge
ua=navigator.userAgent.toLowerCase();isIE=/msie/.test(ua);

function doStuff(){
    //
}
if(isIE){
    // play it safe, very few users, exec ur JS when all resources are loaded
    window.onload=function(){doStuff();}
} else {
    // add event listener to trigger your function when DOMContentLoaded
    if(document.readyState==='loading'){
        document.addEventListener('DOMContentLoaded',doStuff);
    } else {
        // DOMContentLoaded already loaded, so better trigger your function
        doStuff();
    }
}

Answer 8

Ответ с наибольшим количеством утверждающих неверен, по крайней мере, в более поздней версии Chrome 80+.

1. DOMContentLoaded не срабатывает до тех пор, пока не будут выполнены CSS и JavaScript, а DOM не проанализирован (документ загружен)

2、 Событие window.onload, которое не срабатывает до тех пор, пока все сетевые ресурсы, такие как CSS и JavaScript, не будут загружены и DOM не будет проанализирован (документ загружен)

---

По результатам тестирования Chrome 80+ ：

Результаты выполнения теста: после того, как страница проработает 5 секунд, console.log('domContentLoaded OKOK'), осуществляют

console.log(' Window Load OK') начинает работать через 8 секунд