回流: 浏览器渲染部分或全部文档的过程叫做回流。
导致回流的操作:
- 页面首次渲染
- 浏览器窗口大小发生改变
- 元素尺寸、位置发生改变
- 元素内容发生改变(字数、图片大小)
- 元素字体大小发生改变
- 添加或删除可见的DOM元素
- 激活CSS伪类(如:hover)
- 查询某些属性或调用某些方法
一些常用且会导致回流的属性和方法:
- clientWidth、clientHeight、clientTop、clientLeft
- offsetWidth、offsetHeight、offsetTop、offsetLeft
- scrollWidth、scrollHeight、scrollTop、scrollLeft
- scrollIntoView()、scrollIntoViewIfNeeded()
- getComputedStyle()
- getBoundingClientRect()
- scrollTo()
重绘: 当页面元素样式改变并不影响它在文档流中的位置时,浏览器会重新绘制元素样式,这个过程称为重绘。
回流必定引起重绘,重绘不一定引起回流
如何避免:
- 避免使用table布局
- 避免使用CSS表达式
- 将动画效果应用到position属性为absolute或fixed的元素上
- 避免频繁操作样式
- 避免频繁操作DOM
- 可先为元素设置display: none,操作结束后再显示出来,在display: none的元素上操作不会引起重绘和回流
- 对具有复杂动画的元素使用绝对定位,避免父元素及后续元素频繁回流