浅谈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 关系:回流必定会触发重绘,重绘不一定会触发回流。重绘的开销较小,回流的代价较高。