DOMContentLoaded與load的區別

DOMContentLoaded與load的區別

DOM 文檔的加載步驟

• 解析HTML結構
• 加載外部腳本和樣式表文件
• 解析並執行腳本
• 構建 HTML DOM模型 // DOMContentLoaded
• 加載外部資源文件（image等）
• 頁面渲染完成 // load

DOMContentLoaded （對應 jQuery 中的 $(document).ready()）

MDN: 當初始的 HTML 文檔被徹底加載和解析完成以後，DOMContentLoaded 事件被觸發，而無需等待樣式表、圖像和子框架的完成加載

load （對應 jQuery 中的 $(document).load()）

頁面上全部的資源（圖片，音頻，視頻等）被加載之後纔會觸發load事件。因此 load 所須要的時間必然大於等於 DOMContentLoaded 所須要的時間。

HTML 頁面的生命週期

主要有三個重要的事件

• DOMContentLoaded， DOM已經構建好，能夠對DOM節點進行操做

document.addEventListener('DOMContentLoaded', cb)

• load，全部資源加載完畢，能夠對資源進行一系列操做，好比獲取圖片寬高等~

window.onload = function() {}

• beforeunload/unload(基本不會用到)，當瀏覽器窗口關閉或者刷新時，會觸發beforeunload事件。當前頁面不會直接關閉，能夠點擊肯定按鈕關閉或刷新，也能夠取消關閉或刷新。咱們能夠檢查用戶是否保存了修改，並提示他是否肯定離開當前頁面

window.onbeforeunload = function() {
    return "There are unsaved changes. Leave now?";
}

相關知識點：document​.ready​State

原文連接: https://arronf2e.github.io/post/js-xue-xi-domcontentloaded-yu-load-de-qu-bie