回流和重绘 ​

何为回流（重排）？ ​

布局引擎会根据各种样式计算每个元素（盒模型）在页面上的大小与位置。

何为重绘？ ​

当计算好盒模型的位置、大小及其它属性后，浏览器根据每个盒子特性（颜色，方向）进行绘制。

什么操作会触发回流？ ​

当浏览器需要（重新）计算元素的几何属性时（位置，大小等），便会触发回流，具体地：

• 页面初始渲染；
• 元素的位置发生变化，如：left、right、top、bottom等；
• 元素的尺寸发生变化，如：width、hegiht、padding、border、margin等；
• 元素的内容发生变化，如：字体大小、文字数量、图片大小等；
• 添加或删除可见的DOM元素；
• 激活CSS伪类，如：:hover；
• 查询某些属性，如：
  • client系：clientWidth、clientHeight、clientTop、clientLeft；
  • offset系：offsetWidth、offsetHeight、offsetTop、offsetLeft；
  • scroll系：scrollWidth、scrollHeight、scrollTop、scrollLeft；
• 调用某些方法，如：getComputedStyle()、getBoundingClientRect()、scrollTo()、scrollIntoView()等。

什么操作会触发重绘？ ​

当浏览器需要（重新）计算元素外观样式的变化时（颜色、文本方向、阴影等），便会触发重绘。

回流和重绘是什么样的关系？ ​

由像素管道可知：回流一定会触发重绘，而重绘不一定会触发回流。

如何减少回流和重绘？ ​

• 避免使用table布局；
• 避免使用CSS表达式，如：calc()；
• 避免设置多项内联样式，尽可能使用class合并样式修改；
• 对于复杂的动画，对元素设置position: fixed/absolute，尽可能地使其脱离文档流；
• 使用能开启 CSS3 硬件加速的属性，如：opacity、transform(可替换掉left、right等)；
• 通过JavaScript动态插入多个元素时，使用DocumentFragment合并插入操作；
• 需频繁操作元素时，应设置display: none使其先离线，完成操作后再恢复；
• 此外像屏幕滚动、窗口缩放、按钮点击及输入查询等，应合理设置防抖与节流。