重绘与重排的总结

一、浏览器渲染流程

• 解析HTML，创建DOM树
• 解析CSS，生成CSS规则树
• 将DOM树与CSS规则树合并，构建渲染树(RenderingObject树)
• 布局和绘制，重绘(repaint)和重排(reflow) (重排也称回流)

1.下述情况会发生浏览器重排
1.添加或者删除可见的DOM元素
2.元素位置改变
3.元素尺寸改变（包括：内外边距、边框厚度、宽度和高度等属性的改变）
4.内容改变，例如：文本改变或者图片被另一个不同尺寸的图片替代
5.页面渲染器初始化
6,浏览器窗口尺寸改变’
7.对可见元素 display：none，或者对不可见元素 display：block 时
8.激活伪类(:hover)
9.transition对宽高的处理，在整个transition的每一帧中，浏览器都要去重新布局，绘制页面(参考)

2. 重绘何时发生
1.当 render tree 中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的，比如 background-color，则称之为重绘
2.改变字体
3.增加或者移除样式表
4.内容变化，比如用户在input框中输入文字
5.激活CSS伪类(:hover)
6.脚本操作DOM （也有可能造成回流
7.计算 offsetWidth 和 offsetHeight 的属性
8.设置style属性的值
3.刷新渲染队列d的属性
1.offsetTop，offsetLeft，offsetWidth，offsetHeight
2.scrollTop，scrollLeft，scrollWidth，scrollHeight
3.clientTop，clientLeft，clientWidth，clientHeight
4.width，height
5.getComputedStyle() (currentStyle in IE)
6.JS更改元素style
以上属性和方法需要返回最新的布局信息，因此浏览器不得不执行渲染队列中的“待处理”变化并触发重排以返回正确的值
4.优化方案
1.最小化DOM访问次数，尽可能在JavaScript端处理
2.如果需要多次访问某个DOM节点，请使用局部变量存储它的引用
3.小心处理HTML集合，因为它实时联系着底层文档。把集合长度缓存到一个变量中，并在迭代中使用它
4.如果可能的话，使用速度更快的API，比如 querySelectorAll() 和 firstElementChild
5.要留意重绘和重排：批量修改样式时，“离线”操作DOM树，使用缓存，并减少访问布局信息的次数
6.动画中使用绝对定位
7.使用事件委托来减少事件处理器的数量
8.尽量避免用 transition 过渡会更改布局的属性，如果有位移之类的，考虑用transform + transition
9.制作动画时，尽量使用 CSS3 的 transform，因为 transform 属性不会改变元素的布局（更详细的知识可以参考
参考文献页面重绘和回流以及优化
5.transform为什么不会触发重排的操作
1.合成（composite）详谈层合成（composite）
2.那么使用CSS3的transform来实现动画是否可以避免重排问题？或者说浏览器针对这一部分做了其他优化？

经过一番查找，答案如下：

CSS的最终表现分为以下四步：Recalculate Style -> Layout -> Paint Setup and Paint -> Composite Layers

按照中文的意思大致是 查找并计算样式 -> 排布 -> 绘制 -> 组合层

这上面的几个步骤有点类似于上文说到的重排必定导致重绘，而查询属性会强制发生重排。所以上文提到的重排重绘内容可以结合这里进行理解。

由于transform是位于Composite Layers层，而width、left、margin等则是位于Layout层，在Layout层发生的改变必定导致Paint Setup and Paint -> Composite Layers，所以相对而言使用transform实现的动画效果肯定比left这些更加流畅