一、总体步骤

HTML渲染大致分为如下几步：

HTML渲染流程图

1. HTML被HTML解析器解析成DOM Tree, CSS则被CSS解析器解析成CSSOM Tree。
2. DOM Tree和CSSOM Tree解析完成后，被附加到一起，形成渲染树（Render Tree）。
3. 重排(节点信息计算)，这个过程被叫做Layout(Webkit)或者Reflow(Mozilla)。即根据渲染树计算每个节点的几何信息。
4. 重绘(渲染绘制)，这个过程被叫做(Painting 或者 Repaint)。即根据计算好的信息绘制整个页面。

以上4步简述浏览器的一次渲染过程，理论上，每一次的dom更改或者css几何属性更改，都会引起一次浏览器的重排/重绘过程，而如果是css的非几何属性更改，则只会引起重绘过程。所以说重排一定会引起重绘，而重绘不一定会引起重排。

二、重排 Reflow

为什么是Flow？

浏览器渲染页面默认采用的是流式布局模型。

概念：

根据渲染树中每个渲染对象的信息，计算出各自渲染对象的几何信息（位置与大小），并且安置在界面中的正确位置。

作用范围：

结构更改程度会决定周边DOM更改范围。比如根节点几何信息的改变会在全局范围造成重排，对渲染树的局部进行重新布局会影响局部范围。

引起重排的操作：

• 页面首次渲染。
• 浏览器窗口大小发生改变。
• 元素尺寸或位置发生改变。
• 元素内容变化（文字数量或图片大小等等）。
• 元素字体大小变化。
• 添加或者删除可见的DOM元素。
• 激活CSS伪类（例如：:hover）。
• 设置style属性
• 查询某些属性或调用某些方法。

引起重排的属性和方法

三、重绘 Repaint

什么时候触发重绘？

页面元素样式改变不影响文档流的位置信息改变。

引起重绘的属性

四、针对浏览器渲染的性能优化

1. 减少DOM操作：
   • 缓存DOM信息再操作，得益于现代框架的虚拟DOM，可以提高性能。
2. 更优的API：
   • 开启动画GPU加速
   • 减少HTML集合（类数组）遍历，耗费资源高
   • 用事件委托减少事件处理器的数量
3. 减少重排
   • 避免大量style属性设置，用class更改来统一打包，一次性重排。
   • 动画的元素，设置position:absolute或fixed，不影响到文档流。
   • table布局，table中某个元素reflow，可能其他元素都会reflow。不得已设置table-layout:auto; table就可以一行一行的渲染。
4. css处理
   • 少用css表达式
   • 减少js修改元素样式，尽量操作class名
   • 动画尽量使用在绝对或者固定定位的元素
   • 隐藏在屏幕外或者页面滚动的时候尽量停止动画