浅谈JS重绘与回流

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

常见的重绘操作有：

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

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

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

 

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