• 重排(重构/回流/Reflow)：当渲染树的一部分必须更新并且节点的尺寸产生了变动，浏览器会使渲染树中受到影响的局部生效，并从新结构渲染树。
  • 重绘(Repaint)：是在一个元素的外观被扭转所触发的浏览器行为，浏览器会依据元素的新属性从新绘制，使元素出现新的外观。比方扭转某个元素的背景色、文字色彩、边框色彩等等
重排
  1. 元素宽度、高度扭转
  2. 新增、删除可见dom元素
  3. 元素的地位扭转
  4. 浏览器窗口尺寸扭转
  5. 填充内容的扭转，比方文本的扭转或图片大小扭转而引起的计算值宽度和高度的扭转
如何防止触发回流和重绘
  • 防止频繁应用 style，而是采纳批改class的形式。
  • 将动画成果利用到position属性为absolute或fixed的元素上。
  • 也能够先为元素设置display: none，操作完结后再把它显示进去。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘
  • 应用createDocumentFragment进行批量的 DOM 操作。
  • 对于 resize、scroll 等进行防抖/节流解决。
  • 防止频繁读取会引发回流/重绘的属性，如果的确须要屡次应用，就用一个变量缓存起来。
  • 利用 CSS3 的transform、opacity、filter这些属性能够实现合成的成果，也就是GPU减速。