堆棧內存溢出
  簡體   English   中英

DOMContentLoaded 和 load 事件的區別

[英]Difference between DOMContentLoaded and load events

 原文  2010-03-10 05:32:47  1   8    javascript/ browser

問題描述

DOMContentLoaded和load事件有什么區別？

8 個解決方案

解決方案1
 215 已采納  2010-03-10 05:36:34

來自Mozilla 開發者中心：

DOMContentLoaded 事件在文檔完全加載和解析后觸發，無需等待樣式表、圖像和子框架完成加載（加載事件可用於檢測完全加載的頁面）。

解決方案2
 95  2010-03-10 05:41:52

DOMContentLoaded事件將在 DOM 層次結構完全構建后立即觸發， load事件將在所有圖像和子幀加載完成后執行。

DOMContentLoaded適用於大多數現代瀏覽器， 但不適用於 IE， 包括 IE9 及更高版本。 有一些變通方法可以在舊版本的 IE 上模擬此事件，例如在 jQuery 庫中使用的方法，它們會附加IE 特定的onreadystatechange事件。

解決方案3
 58  2014-03-06 06:19:01

自己看看區別：

演示

來自微軟 IE

DOMContentLoaded 事件在當前頁面解析完成時觸發； 當所有文件從所有資源（包括廣告和圖像）加載完畢后，將觸發 load 事件。 DOMContentLoaded 是一個很好的事件，用於將 UI 功能連接到復雜的網頁。

來自Mozilla 開發者網絡

DOMContentLoaded 事件在文檔完全加載和解析后觸發，無需等待樣式表、圖像和子框架完成加載（加載事件可用於檢測完全加載的頁面）。

解決方案4
 30  2014-01-16 07:09:24

DOMContentLoaded == window.onDomReady()

Load == window.onLoad()

在文檔“准備好”之前，不能安全地操作頁面。 jQuery 會為您檢測這種准備狀態。 包含在$(document).ready()只會在頁面文檔對象模型 (DOM) 准備好執行 JavaScript 代碼時運行。 包含在$(window).load(function() { ... })將在整個頁面（圖像或 iframe）准備好后運行，而不僅僅是 DOM。

請參閱：使用 JQuery Core 的文檔就緒文檔。

解決方案5
 17  2014-06-19 18:34:37

  • domContentLoaded ：標記 DOM 准備就緒並且沒有樣式表阻止 JavaScript 執行的時間點——這意味着我們現在可以（可能）構建渲染樹。 許多 JavaScript 框架在開始執行自己的邏輯之前會等待此事件。 出於這個原因，瀏覽器會捕獲 EventStart 和 EventEnd 時間戳，以允許我們跟蹤此執行所花費的時間。

  • loadEvent ：作為每個頁面加載的最后一步，瀏覽器會觸發“onload”事件，該事件可以觸發額外的應用程序邏輯。

來源

解決方案6
 3  2021-05-18 07:30:54

為了充分理解，我建議閱讀以下文章：

  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

簡而言之：

DOMContentLoaded事件在創建DOM時觸發（有關DOM更多信息，請參見鏈接 1），並且在load DOM 、 CSSOM和所有其他資源時觸發load事件。 如果您沒有 Javascript，那么您的網頁加載順序可能如下所示： 在此處輸入圖片說明

或者用檢查窗口的話來說， DOMContentLoaded事件會比load事件更早觸發（藍線代表DOMContentLoaded ，紅線代表load事件）： 在此處輸入圖片說明

但是，如果您使用 Javascript（不是異步或延遲），則DOM創建將等待 JS 加載。 由於 JS 也會修改 CSS，因此 JS 會等待CSSOM加載。

由於這是最常見的情況，在大多數情況下，創建DOMContentLoaded事件實際上必須等待樣式表也被加載。

加載鏈如下所示：

在此處輸入圖片說明

所以DOMContentLoaded和load之間的主要區別在於，在這種情況下，只有圖像的加載時間，可以與樣式表和 JS 並行下載。

在此處輸入圖片說明

並不是說如果您對 JS 使用 async 或 defer 就不會發生這種情況：

在此處輸入圖片說明

解決方案7
 1  2020-06-07 03:16:48

這是一些對我們有用的代碼。 我們發現 MSIE 被DomContentLoaded命中和錯過，當沒有緩存其他資源時似乎有一些延遲（根據我們的控制台日志記錄最多 300 毫秒），並且當它們被緩存時觸發太快。 所以我們對 MISE 采取了后備措施。 無論DomContentLoaded在外部 JS 文件之前還是之后觸發，您還想觸發doStuff()函數。

// 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();
    }
}

解決方案8
 -1  2021-03-03 09:33:16

審批人最多的答案是錯誤的，至少在更高版本的 Chrome 80+ 中是這樣。

1、DOMContentLoaded 不會觸發，直到 CSS 和 JavaScript 被執行並且 DOM 被解析（文檔已經加載）

2、window.onload事件，在所有網絡資源，如CSS和JavaScript都加載完畢，DOM解析完畢（文檔已加載）后才會觸發

基於 Chrome 80+ 測試結果： 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOMContentLoaded , load</title> <link href="http://localhost/public/css?sleep=5000" rel="stylesheet"> <!-- 5000 milliseconds after the URL request the server begins to respond --> </head> <body> <img src="http://localhost/public/img?sleep=8000"> <!-- 8000 milliseconds after the URL request the server starts responding to the resource --> <script> document.addEventListener('DOMContentLoaded', () => { console.log('DOMContentLoaded OKOK') }) window.addEventListener('load', () => { console.log('window load OK') }) </script> <script src="http://localhost/public/js?sleep=2000"></script> <!-- 2000 milliseconds after the URL request the server begins to respond --> </body> </html>

測試執行結果：頁面運行5秒后，執行console.log('domContentLoaded OKOK')

console.log(' Window Load OK')在 8 秒后開始運行

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 jQuery，DOMContentLoaded和加載事件 DOMContentLoaded和DOMContentReady有什么區別？ Shopify 結帳液體模板頁面：加載事件和 DOMContentLoaded 有什么區別？ 窗口和文檔之間的加載/就緒事件的差異 html pageshow 和 load 事件有什么區別？ Javascript 加載 vs 就緒 vs domready vs DOMContentLoaded 事件 如何確定load和DOMContentLoaded事件的觸發順序？ 對於textarea中的大內容，Firefox DOMContentLoaded和load事件非常慢 onViewRender和事件之間的區別，以便在完整日歷中加載事件 什么是 domContentLoaded 和 domInteractive 事件？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM