HTML5 的 DOMContentLoaded 和 onload

概念与定义

DOMContentLoaded(DCL)

https://developers.google.com...

The DOMContentLoaded reports the time when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

意思是当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。

onload(OL)

https://developers.google.com...

The load event is fired when the page and its dependent resources have finished loading.

意思是当页面的 html、css、js、image 等资源都已经加载完之后才会触发 load 事件。

不过要想彻底理解上述定义，还需明确一些概念。

加载/下载

指浏览器把网页内容下载到本地的过程。

解析

• 浏览器向服务器请求到了 HTML 文档后便开始解析，产物是 DOM（文档对象模型）。
• 如果有 CSS 的会根据 CSS 生成 CSSOM（CSS 对象模型）。
• 然后再由 DOM 和 CSSOM 合并产生渲染树。
• 有了渲染树，知道了所有节点的样式，下面便根据这些节点以及样式计算它们在浏览器中确切的大小和位置，这就是布局阶段。
• 有了以上这些信息，就把节点绘制到浏览器上。

在解析过程中，

• 遇到