浏览器渲染网页过程

想法丨发现丨习惯

同道者同行 同行者同享

我在文章《浏览器中输入URL回车后...》中介绍了当在浏览器中输入 URL 回车后客户端如何找到服务器并与之通信的过程。在客户端与服务器互相通信的过程中举了客户端向服务器请求网页资源的例子，那么本章就详细介绍当客户端向服务器请求到网页资源后，浏览器渲染网页的过程。

当请求到网页资源后，浏览器便会开始渲染，渲染主要分为以下几个步骤：

构建文档对象模型（DOM）；

构建 CSS 对象模型（CSSOM）；

构建渲染树（Render Tree）；

布局（Layout）；

绘制（Painting）。

上述步骤不是一个一次性执行完毕的过程，如果在渲染的过程中 DOM 或 CSSOM 被修改，则上述步骤会被重复执行。那么接下来对上述五个步骤做一个详细的说明～

构建文档对象模型（DOM）

当浏览器从磁盘或网络中获取到网页（HTML 文件）的数据时，会通过一系列的转换解析出各个 标签，并最终构建文档对象模型，即我们经常说的 DOM Tree，DOM Tree 的构建过程是一个深度遍历的过程，当前节点的所有子节点构建好后才会去构建当前节点的下一个兄弟节点。

构建 CSS 对象模型（CSSOM）

在构建文档对象模型的过程中，若遇到

标签，则浏览器会发出一个获取该资源的请求，最终获得包含有各种 CSS 样式的样式文件。

与 HTML 文件一样，浏览器会将该文件通过一系列的转换和解析构建

出 CSS 对象模型，即 CSS Rule Tree。

构建渲染树（Render Tree）

DOM Tree 描述的是文档内容，而 CSS Rule Tree 描述的是应用于文档的样式规则，二者是独立的对象。浏览器会把 DOM Tree 和 CSS Rule Tree 组合起来构建渲染树，即 Render Tree。

从 DOM Tree 的根节点开始，遍历每个可见的节点（某些不可见的节点如 标签、 标签等和某些通过 CSS 隐藏的节点不会体现在渲染结果中，因此会被忽略），为每一个可见的节点匹配并应用对应的 CSSOM 规则，生成有内容和计算样式的可见节点的树。

布局（Layout）

构建完渲染树后，浏览器便会从渲染树的根节点开始遍历，计算页面上每个对象的几何信息，这一个过程称为布局。布局输出的是一个个「盒子模型」，它精确的计算出每个元素在视口中的准确位置及尺寸大小。

绘制（Painting）

最后一步是绘制，即将渲染树中的每个节点绘制成实际的像素点。

关于回流（Reflow）和重绘（Repaint）

渲染页面的过程并不是一番风顺的，经常会遇到元素的样式被修改的情况，元素的样式被修改后则会发生回流和重绘。

回流是指页面中某些元素发生变化而影响了布局时（如尺寸、位置改变），浏览器需要重新布局并绘制的过程。

重绘是指页面中某些元素发生了不影响布局的变化时（如颜色改变），浏览器重新绘制的过程。

由于回流一定会包括重绘，所以回流会更影响性能，在实际操作中，要尽量减少回流。

引用总结

在网上看到一段对浏览器渲染网页总结的一个有趣版本，在此引用，希望让大家对浏览器渲染网页的过程有一个更深刻的印象。

用户输入网址（假设是个 HTML 页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回 HTML 文件；

浏览器开始载入代码，发现 ＜head＞ 标签内有一个 ＜link＞ 标签引用外部 CSS 文件；

浏览器又发出 CSS 文件的请求，服务器返回这个 CSS 文件；

浏览器继续载入 HTML 中 ＜body＞ 部分的代码，并且 CSS 文件已经拿到手了，可以开始渲染页面了；

浏览器在代码中发现一个 ＜img＞ 标签引用了一张图片，向服务器发出请求，此时浏览器不会等到图片下载完，而是继续渲染后面的代码；

服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此会发生回流，浏览器需要回过头来重新布局和绘制这部分元素；

浏览器发现了一个包含一行 JavaScript 代码的 ＜script＞ 标签，赶快运行它；

JavaScript 脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个 ＜div＞ (style.display=”none”)，于是又发生了回流，浏览器不得不重新布局和绘制这部分元素；

终于等到了 ＜/html＞ 的到来，浏览器泪流满面；

等等，还没完，用户点了一下界面中的「换肤」按钮，JavaScript 让浏览器换了一下 ＜link＞ 标签的 CSS 路径；

浏览器召集了在座的各位 ＜div＞＜span＞＜ul＞＜li＞ 们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的 CSS 文件，重新渲染页面。