JS回流与重绘

• 重绘(repaint)：当元素样式的改变不影响页面布局时，比如元素的颜色，浏览器将对元素进行的更新，称之为重绘。

  常见的重绘操作有：
  1，改变元素颜色
  2，改变元素背景色 ……

• 回流(reflow)：也叫做重排。当元素的尺寸或者位置发生了变化，就需要重新计算渲染树，这就是回流，比如元素的宽高、位置，浏览器会重新渲染页面，称为回流，又叫重排（layout）。

• 关系：回流必定会触发重绘，重绘不一定会触发回流。重绘的开销较小，回流的代价较高。

2、触发页面回流的属性

• 1、盒子模型相关：
  width、height、padding、border、margin、display、border-width、min-height
• 2、定位属性及浮动：
  top、right、bottom、left、position、float、clear
• 3、节点内部文字结构，行内属性
  font-size、line-height

3、只触发页面重绘的属性

• color、background-color、visibility、opacity、
• border-style、border-radius、
• box-shadow、outline