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