十人九问，回流和重排怎么优化？

这个题目也是前端面试常问题，下面针对这个问题做出解答。

1.回流是什么？

节点的一些样式（背景色，边框颜色，文字颜色等）发生改变，只需要应用新样式绘制这个元素就可以了；
发生机制：
颜色
visibility: hidden，元素还是占了位置的

2.重排是什么？

渲染树（render tree）的元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树。
发生机制：
页面初始渲染；
添加/删除元素；
位置、尺寸（包括边距大小、高度、宽度）、内容（文本、图片替换）变化；
浏览器窗口大小变化；
display:none，脱离了文档流；

3.这两者之间有什么关系

“重绘"不一定需要"重排”，但是，“重排"必然导致"重绘”，

4.回流和重排怎么优化？

优化方案：减少"重排"和"重绘"的频率和成本，尽量少触发重新渲染。

措施

1.避免逐个修改节点样式，尽量一次性修改
2.将需要多次修改的DOM元素缓存
3.可以将需要多次修改的DOM元素设置 display:none，操作完再显示。（因为隐藏元素不在render树内，因此修改隐藏元素不会触发回流重绘）
4.将复杂的节点元素脱离文档流，降低回流成本
5.将CSS的引入文件放在文件头部，js引入文件放到尾部
6. css3硬件加速（GPU加速）
减少重绘和回流的方法

css：

避免使用table布局。
尽可能在DOM树的最末端改变class。
避免设置多层内联样式。
将动画效果应用到position属性为absolute或fixed的元素上。
避免使用CSS表达式。

javascript：

最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
具有复杂动画的元素使用绝对定位，使它脱离文档流

比起考虑如何减少回流重绘，我们更期望的是，根本不要回流重绘。这个时候，css3硬件加速就闪亮登场啦！！
划重点：使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。
常见的触发硬件加速的css属性：
transform
opacity
filters
Will-change
如果你为太多元素使用css3硬件加速，会导致内存占用较大，会有性能问题。
在GPU渲染字体会导致抗锯齿无效。这是因为GPU和CPU的算法不同。因此如果你不在动画结束的时候关闭硬件加速，会产生字体模糊。

5.浏览器渲染过程

相似会问：浏览器渲染引擎工作流程，网页的生成过程

1.解析HTML，生成DOM树，解析CSS ,构建Rules树
2.将DOM树和Rules树结合，生成渲染树(Render Tree)
3.Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
4.Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
5.Display:将像素发送给GPU（GPU中文翻译为“图形处理器），展示在页面上。

以上就为回流与重排的回答了，关于更多的前端面试与笔试可以关注下笔者，后期会不断更新的。