针对回流和重绘的渲染优化--公司分享

若是是你，你会如何实现浏览器内核，你认为的浏览器渲染的流程是怎么样的

工做开发中，你有作过哪些关于性能优化的工做（代码），或者目前的业务中有哪些是能够作优化的

浏览器渲染机制

什么是渲染过程？简单来讲，渲染引擎根据 HTML 文件描述构建相应的数学模型，调用浏览器各个零部件，从而将网页资源代码转换为图像结果，这个过程就是渲染过程（以下流程图）。

浏览器渲染的重要模块

• HTML 解释器：将 HTML 文档通过词法分析输出 DOM 树
• CSS 解释器：解析 CSS 文档, 生成样式规则
• 图层布局计算模块：布局计算每一个节点的精确位置和大小
• 视图绘制模块：进行具体节点的图像绘制
• JavaScript 引擎：编译执行 Javascript 代码

渲染流程图

渲染过程简要解析：

1. DOM 树：解析 HTML 以建立的是 DOM 树（DOM tree ）：渲染引擎开始解析 HTML 文档，转换树中的标签到 DOM 节点，它被称为“内容树”。

2. CSSOM 树：解析 CSS（包括外部 CSS 文件和样式元素）建立的是 CSSOM 树。

3. 渲染树：CSSOM 与 DOM 树结合，以后咱们获得的就是渲染树（Render tree ）。

4. Layout(回流):根据生成的渲染树，进行计算(Layout)，获得节点的几何信息（绝对位置，大小等布局信息)

5. Painting(重绘):根据渲染树以及布局计算获得的几何信息，获得节点的绝对像素

6. Display:浏览器会合并合各个图层，将数据由 CPU 输出给 GPU 最终绘制在屏幕上。（复杂的视图层会给这个阶段的 GPU 计算带来一些压力，在实际应用中为了优化动画性能，咱们有时会手动区分不一样的图层）。

渲染树之Dom树

渲染树之CSSOM树

渲染树

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

1. 从DOM树的根节点开始遍历每一个可见节点。
2. 对于每一个可见的节点，找到CSSOM树中对应的规则，并应用它们
3. 根据每一个可见节点以及其对应的样式，组合生成渲染树

不可见的节点包括：

1. 不会渲染输出的节点，好比script、meta、link等。
2. 经过css进行隐藏的节点。好比display:none。注意，利用visibility和opacity隐藏的节点，仍是会显示在渲染树上的。只有display:none的节点才不会显示在渲染树上。

回流重绘简介

回流：页面布局和几何属性发生改变，更新渲染树，计算布局，从新绘制，这个过程就叫回流

重绘：页面布局和几何属性没有改变，只是元素外观发生了变化，更新渲染树，从新绘制，这一过程叫重绘

模拟渲染函数

致使回流与重绘的操做

引起回流的操做：页面布局和几何属性改变时就须要回流

1. 添加或者删除可见的DOM元素；
2. 元素位置改变；
3. 元素尺寸改变——边距、填充、边框、宽度和高度
4. 内容改变——好比文本改变或者图片大小改变而引发的计算值宽度和高度改变；
5. 浏览器窗口尺寸改变——resize事件发生时；（回流是根据视口的大小来计算元素的位置和大小的）
6. 经过js API获取元素的实时属性

引起回流的css属性和方法

引起重绘的缘由：页面布局和几何属性没有改变，只是元素外观发生了变化

引起重绘的css属性

如何减小回流与重绘

浏览器自身的优化策略

对于每次的回流与重绘，浏览器并非立马进行回流和重绘，而是有一个缓存队列来保存必定时间内的回流重绘或是必定数量的回流和重绘，从而进行批量处理，可是获取布局实时信息的时候，就会当即处理整个缓存队列

减小回流和重绘

• 批量修改css样式（cssText, class）
• 批量处理Dom
  1. 使元素脱离文档流（display、absolute、fixed、fragment、cloneNode）
  2. 对其进行屡次修改
  3. 将元素带回到文档中
• 避免频繁获取布局实时信息（采用变量缓存形式）
• css3开启GPU加速（transform、opacity、filters动画），建立独立图层,减小对父级上下文的布局影响
• 使用resize事件的时候，作防抖和节流处理

参考文献

1. https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/（浏览器工做原理）

2. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn