浏览器基础（5）-DOMContentLoaded与Load详解

DOMContentLoaded与Load

首先我们先直观感受一哈什么是DOMContentLoaded与Load。打开Chrome DevTools，切换到Network面板，按F5刷新一哈页面，得到如下截图：

我们可以看到DOMContentLoaded的时间为1.39s，Load的时间为1.98s。蓝线和蓝字表示的是同一东西，只是表达形式不一样罢了。红线和红字同理。

直观感受完，我们该看看这个到底是什么东东了。

什么是DOMContentLoaded

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

我们先思考一个问题

如何衡量一个网页的加载速度？

有人说可以用网页加载完全的时间来衡量。我觉得这没有问题，但不够好。为什么呢？在日常生活中，很多时候因为网络原因我们并不需要等待网页上的所有内容都加载完毕，而是只需要加载主要内容就可以了，比如你打开这篇博客时，可能并不需要等所有图片都加载完成，而是看到博客的正文就可以正常阅读了。把上面的话提炼一下就是，用户有时候只需要在空白的网页上看见内容就可以了，而不需要等待所有内容都加载出来。那既然这样，回到刚刚的问题，我觉得衡量一个网页加载速度的一个方法就是“计算这个网页从空白到出现内容所花费的时间”。那怎么计算这段时间？HTML5 规范已经帮我们完成了相应的工作，就是当一个 HTML 文档被加载和解析完成后，DOMContentLoaded 事件便会被触发。

HTML 文档被完全加载和解析完成是什么意思？

接下来我们就需要从浏览器渲染原理来谈谈。我们知道执行 JS 有一个 JS 引擎，那么执行渲染也有一个渲染引擎。同样，渲染引擎在不同的浏览器中也不是都相同的。比如在 Firefox 中叫做 Gecko，在 Chrome 和 Safari 中都是基于 WebKit 开发的。

我这里只是简单讲一哈过程，如果需要升深入了解的同学，可以去看一哈这篇文章