html5 内容载入,HTML5 的 DOMContentLoaded 和 onload

概念与定义

DOMContentLoaded(DCL)

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)

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 合并产生渲染树。

有了渲染树，知道了所有节点的样式，下面便根据这些节点以及样式计算它们在浏览器中确切的大小和位置，这就是布局阶段。

有了以上这些信息，就把节点绘制到浏览器上。

在解析过程中，

遇到

遇到 标签时，不会阻塞后续内容的解析(比如 DOM 构建)，检查 资源是否已下载，如果已下载，则构建 CSSOM。

遇到 DOM 标签时，执行 DOM 构建，将该 DOM 元素添加到文档树中。

有一点要注意的是，在

中第一个