1 重绘(repaint)
概念: 当元素样式的改变不影响布局时, 浏览器将使用重绘对元素进行更新, 此时发生的过程就叫做重绘;
重绘只是UI层面的像素绘制, 消耗较少;
- 常见的重绘操作:
a: 改变元素颜色;
b: 改变元素背景色;
c: ....
2 回流(reflow)
概念: 回流又叫做重排. 当元素的尺寸,结构或者触发某些属性时,浏览器会重新渲染页面, 称为回流;
回流需要浏览器重新经过计算,计算后重新渲染页面布局,损耗较大;
- 常见的回流操作:
a: 页面初次渲染;
b: 浏览器窗口大小的改变;
c: 元素尺寸 位置 内容 发生改变;
d: 添加或者删除可见的DOM元素;
e: 激活 css 伪类(:hover....);
f: ....
总结 :
- 回流必定会触发重绘,重绘不一定会触发回流;
- 回流的开销大于重绘的开销
网友评论