浏览器的回流与重绘
Opened this issue · 0 comments
chuiliu commented
回流（Reflow）：
当Render Tree中部分或全部元素的尺寸、结构、或者某些属性发生改变时，浏览器重新渲染部分或者全部文档的过程称为回流。
- 页面首次渲染
- 浏览器窗口大小发生改变
- 元素尺寸或者位置发生改变
- 元素内容变化
- 元素字体大小变化
- 添加或删除可见的DOM元素（必须是可见的元素。display: none;的元素不会触发回流）
- 激活 CSS 伪类（:hover）
- 查询某些属性或者调用某些方法
clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
scrollIntoView()、scrollIntoViewIfNeeded()
getComputedStyle()
getBoundingClientRect()
scrollTo()
重绘（Repaint）：
元素样式的改变，并且这个改变不影响到元素的位置时
例如：background-color, color, visibility
回流必将引起重绘
避免频繁操作样式，一般通过修改class来一次性修改，以减少回流次数
避免频繁操作DOM，使用documentFragment，
在position为fixed或者absolute的元素上使用动画，以减避免导致其它元素的回流
避免使用table布局
避免使用css表达式
尽可能在DOM树的最末端改变class