关于CSS重排和重绘的概念，最近看到不少这方面的文章，觉得挺有用，在制作中考虑浏览器的性能，减少重排能够节省浏览器对其子元素及父类元素的重新渲染；避免过分的重绘也能节省浏览器性能；优化动画，使用3D启用GPU硬件加速；慎重选择高消耗的样式，如box-shadow、border-radius、transform、css filters等。
浏览器的渲染机制
浏览器渲染展示网页的过程，大致分为以下几个步骤：
- HTML被HTML解析器解析成DOM 树
- css则被css解析器解析成CSSOM 树
- 结合DOM树和CSSOM树，生成一棵渲染树(Render Tree)
- 生成布局（flow），即将所有渲染树的所有节点进行平面合成
- 将布局绘制（paint）在屏幕上
渲染：
网页生成的时候，至少会渲染一次。 在用户访问的过程中，还会不断重新渲染
重新渲染需要重复之前的第四步(重新生成布局)+第五步(重新绘制)或者只有第五个步(重新绘制)。
重排比重绘大：
大，在这个语境里的意思是：谁能影响谁？
- 重绘：某些元素的外观被改变，例如：元素的填充颜色
- 重排：重新生成布局，重新排列元素。
就如上面的概念一样，单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分。
比如改变元素高度，这个元素乃至周边dom都需要重新绘制。
复制代码也就是说： "重绘"不一定会出现"重排"，"重排"必然会出现"重绘"
慎重选择高消耗的样式
什么 CSS 属性是高消耗的？就是那些绘制前需要浏览器进行大量计算的属性。
- box-shadows
- border-radius
- transparency
- transforms
- CSS filters（性能杀手）
重排(reflow)：
概念：
当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排,重排也叫回流.
常见引起重排属性和方法
任何会改变元素几何信息(元素的位置和尺寸大小)的操作，都会触发重排，下面列一些栗子：
- 添加或者删除可见的DOM元素；
- 元素尺寸改变——边距、填充、边框、宽度和高度
- 内容变化，比如用户在input框中输入文字
- 浏览器窗口尺寸改变——resize事件发生时
- 计算 offsetWidth 和 offsetHeight 属性
- 设置 style 属性的值
- 激活伪类，如:hover
- 操作class属性
| 常见的重排元素 | |||
|---|---|---|---|
| width | height | padding | margin |
| display | border-width | border | top |
| position | font-size | float | text-align |
| overflow-y | font-weight | overflow | left |
| font-family | line-height | vertical-align | right |
| clear | white-space | bottom | min-height |
重排影响的范围：
由于浏览器渲染界面是基于流失布局模型的，所以触发重排时会对周围DOM重新排列，影响的范围有两种：
- 全局范围：从根节点
html开始对整个渲染树进行重新布局。 - 局部范围：对渲染树的某部分或某一个渲染对象进行重新布局
全局范围重排：
<body>
<div class="hello">
<h4>hello</h4>
<p><strong>Name:</strong>BDing</p>
<h5>male</h5>
<ol>
<li>coding</li>
<li>loving</li>
</ol>
</div>
</body>
复制代码当p节点上发生reflow时，hello和body也会重新渲染，甚至h5和ol都会收到影响。
局部范围重排：
用局部布局来解释这种现象：把一个dom的宽高之类的几何信息定死，然后在dom内部触发重排，就只会重新渲染该dom内部的元素，而不会影响到外界。
尽可能的减少重排的次数、重排范围：
重排需要更新渲染树,性能花销非常大:
它们的代价是高昂的，会破坏用户体验，并且让UI展示非常迟缓，我们需要尽可能的减少触发重排的次数。
重排的性能花销跟渲染树有多少节点需要重新构建有关系：
所以我们应该尽量以局部布局的形式组织html结构，尽可能小的影响重排的范围。
而不是像全局范围的示例代码一样一溜的堆砌标签，随便一个元素触发重排都会导致全局范围的重排。
重绘(Repaints):
概念：
当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。
常见的引起重绘的属性:
| color | border-style | visibility | background | |
| text-decoration | background-image | background-position | background-repeat | |
| outline-color | outline | outline-style | border-radius | |
| outline-width | box-shadow | background-size |
浏览器的渲染队列：
思考以下代码将会触发几次渲染？
div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';
复制代码根据我们上文的定义，这段代码理论上会触发4次重排+重绘，因为每一次都改变了元素的几何属性，实际上最后只触发了一次重排，这都得益于浏览器的渲染队列机制：
当我们修改了元素的几何属性，导致浏览器触发重排或重绘时。它会把该操作放进渲染队列，等到队列中的操作到了一定的数量或者到了一定的时间间隔时，浏览器就会批量执行这些操作。
强制刷新队列:
div.style.left = '10px';
console.log(div.offsetLeft);
div.style.top = '10px';
console.log(div.offsetTop);
div.style.width = '20px';
console.log(div.offsetWidth);
div.style.height = '20px';
console.log(div.offsetHeight);
复制代码这段代码会触发4次重排+重绘，因为在console中你请求的这几个样式信息，无论何时浏览器都会立即执行渲染队列的任务，即使该值与你操作中修改的值没关联。
因为队列中，可能会有影响到这些值的操作，为了给我们最精确的值，浏览器会立即重排+重绘。
强制刷新队列的style样式请求：
1. offsetTop, offsetLeft, offsetWidth, offsetHeight
1. scrollTop, scrollLeft, scrollWidth, scrollHeight
1. clientTop, clientLeft, clientWidth, clientHeight
1. getComputedStyle(), 或者 IE的 currentStyle
复制代码我们在开发中，应该谨慎的使用这些style请求，注意上下文关系,避免一行代码一个重排，这对性能是个巨大的消耗
重排优化建议
就像上文提到的我们要尽可能的减少重排次数、重排范围，这样说很泛，下面是一些行之有效的建议，大家可以参考一下。
-
把 DOM 离线后修改，比如：先把 DOM 给
display:none(有一次 Reflow)，然后你修改100次，然后再把它显示出来 -
不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
-
实现元素的动画，它的position属性，最好是设为absoulte或fixed，这样不会影响其他元素的布局
-
动画实现的速度的选择。比如实现一个动画，以1个像素为单位移动这样最平滑，但是reflow就会过于频繁，大量消耗CPU资源，如果以3个像素为单位移动则会好很多。
-
不要使用table布局，因为table中某个元素旦触发了reflow，那么整个table的元素都会触发reflow。那么在不得已使用table的场合，可以设置
table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围 -
尽可能不要修改影响范围比较大的 DOM，尽可能限制reflow的影响范围，尽可能在低层级的DOM节点上，上述例子中，如果你要改变p的样式，class就不要加在div上，通过父元素去影响子元素不好。
-
不要一条一条地修改 DOM 的样式，预先定义好 class，然后修改 DOM 的
className，避免设置大量的style属性，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow，所以最好是使用class属性 -
如果CSS里面有计算表达式，每次都会重新计算一遍，触发一次reflow
-
CSS3 动画是优化的重中之重。除了
减少 Reflow 和 Repaints之外，还需要注意以下方面： 启用 GPU 硬件加速
GPU（Graphics Processing Unit） 是图像处理器。GPU 硬件加速是指应用 GPU 的图形性能对浏览器中的一些图形操作交给 GPU 来完成，因为 GPU 是专门为处理图形而设计，所以它在速度和能耗上更有效率。 GPU 加速可以不仅应用于3D，而且也可以应用于2D。这里， GPU 加速通常包括以下几个部分：Canvas2D，布局合成（Layout Compositing）, CSS3转换（transitions），CSS3 3D变换（transforms），WebGL和视频(video)。
/*
* 根据上面的结论
* 将 2d transform 换成 3d
* 就可以强制开启 GPU 加速
* 提高动画性能
*/
div {
transform: translate(10px, 10px);
}
==>
div {
transform: translate3d(10px, 10px, 0);
}
复制代码参考：