redraw(重绘)与reflow(回流)
- 重绘
- 当页面元素样式改变时不影响元素在文档流中的位置时(比如background,color等)这时候浏览器只会将新样式赋予元素进行;重新绘制操作
- 重绘不会带来重新布局,不一定回流
- 回流
- 当改变的操作响应文档内容或者结构,或者元素的位置时就会触发回流。主要有以下几种情况
- DOM操作(对元素的增删改,顺序变化)
- 改变元素的位置
- 内容变化,包括表单区域的文本变化
- css属性的更改或者重新计算
- 增删样式表内容
- 修改class属性
- 浏览器窗口变化(滚动或者缩放)
- 伪类样式激活(:hover等)
- 读取元素的某些属性(offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))
- 当改变的操作响应文档内容或者结构,或者元素的位置时就会触发回流。主要有以下几种情况