目录

前言

“回流（重排）”和“重绘”基本上算是前端的高频词之一，你可以在各个文章及面试题中见到，我们在讨论这个词的时候，其实讨论的是浏览器的渲染流程。
所以在讨论“回流重绘”之前，我们还需要掌握一些知识；在它之中，我们还需要更深入一点；在这之后，我们还要懂得怎么去把理论结合到项目实践中去。

通过这篇文章，你可以学习到的知识：
1、追本溯源，“回流”和“重绘”这个词是如何引出的，在了解这两个词之前我们还需要了解什么
2、浏览器的渲染流程，“回流”和“重绘”的原理
3、优化浏览器渲染性能，减少“回流”和“重绘”，动手将这些优化应用到实际开发中

浏览器的渲染引擎

浏览器的主要组件有：用户界面、浏览器引擎、渲染引擎、网络、用户界面后端、JavaScript解释器、数据存储。

浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您选择的网络资源。浏览器在解析HTML文档，将网页内容展示到浏览器上的流程，其实就是渲染引擎完成的。

渲染流程

我们在这里讨论Gecko和Webkit这两种渲染引擎，其中Firefox 使用的是 Gecko，这是 Mozilla 公司“自制”的呈现引擎。而 Safari 和 Chrome 浏览器使用的都是 WebKit。

WebKit 渲染引擎的主流程：

Mozilla 的 Gecko渲染引擎的主流程：

从图 3 和图 4 可以看出，虽然 WebKit 和 Gecko 使用的术语略有不同，但整体的渲染流程是基本相同的，这里我们参照Webkit引擎来概况一下：

  1. 解析HTML Source，生成DOM树
  2. 解析CSS，生成CSSOM树
  3. 将DOM树和CSSOM树结合，去除不可见元素，生成渲染树(Render Tree)
  4. Layout(布局):根据生成的渲染树，进行布局(Layout)，得到节点的几何信息（位置，大小）
  5. Painting(重绘):根据渲染树以及回流得到的几何信息，将 Render Tree 的每个像素渲染到屏幕上

渲染树与渲染对象

渲染树(render tree)是由可视化元素按照其显示顺序而组成的树，也是文档的可视化表示。它的作用是让您按照正确的顺序绘制内容。

生成渲染树

为了构建渲染树，浏览器主要完成了以下工作：

  1. 从DOM树的根节点开始遍历每个可见节点。
  • 某些节点不会被渲染输出，比如script、link、meta等标签节点
  • 通过css隐藏的节点会被忽略，比如“display: none”。但是注意，visibility: hidden是会被渲染的（渲染成一个空框），因为它仍占据布局空间