前端面试题（18）—— 介绍下重绘和回流（Repaint&Reflow），以及如何进行优化？

首先要知道浏览器渲染机制，具体可看之前的文章：https://www.cnblogs.com/chloe56/p/16161259.html

• 浏览器采用流式布局模型（Flow Based Layout）；
• 浏览器会把HTML解析成DOM,把CSS解析成CSSOM合并产生渲染树（Render Tree）；
• 有了Render Tree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制道页面上；
• 由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一；

---

重绘
由于节点的集合属性发生改变或者由于样式改变而不会影响布局的称为重绘，例如outline、visibility、color、background-color等，重绘的代价是高昂的，因此必须验证DOM树上其他节点元素的可见性。

---

回流
回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或者整个页面）的布局更新。一个元素的回流可能会导致其素有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。大部分的回流将导致页面的重新渲染。
回流必定会发生重绘，重绘不一定会引发回流。

---

浏览器优化
现代浏览器大多是通过队列机制来批量更新布局，浏览器会把修改操作放在队列中，至少一个浏览器刷新（即16.6ms）才会清空队列，但当你获取布局信息的时候，队列中可能会有影响这些属性或方法返回值的操作，即使没有，浏览器也会强制清空队列，触发回流和重绘来确保返回正确的值。
例如offsetTop、clientTop、scrollTop、getComputedStyle()、width、height、getBoundingClientRect()，应该避免频繁的使用这些属性，他们都会强制渲染刷新队列。

---

减少重绘和回流

1.CSS

• 使用transform代替top；
• 使用visibility代替display：none，前者引起重绘，后者引发回流；
• 避免使用table布局；
• 尽可能在DOM树最末端改变class；
• 避免设置多层内联样式，css选择符从右往左匹配查找，避免节点层级过多；
• 将动画效果应用到position属性为absolute或fixed的元素上，避免影响其他元素的布局；
• 避免使用css表达式，可能会引发回流；
• css硬件加速；

2. JavaScript

• 避免频繁操作样式，修改class最好；
• 避免频繁操作DOM，合并多次修改为一次；
• 避免频繁读取会引发回流/重绘的属性，将结果缓存；
• 对具有复杂动画的元素使用绝对定位，使他脱离文档流。