什么是重绘和重排（回流）？

1、重排（回流）

当渲染树（render tree）中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为重排（回流）

• 导致重排（回流）的操作

1、页面首次渲染 浏览器窗口大小发生改变
2、元素内容的变化（文字数量或图片大小等等）
3、添加或删除可见的DOM元素
4、激活 CSS伪类（如：hover）

• 导致重排（回流）的属性和方法

clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
scrollIntoView()、scrollIntoViewIfNeeded()
getComputedStyle()
getBoundingClientRect()
scrollTo()

2、重绘

当页面中元素样式的改变并不影响它在文档流中的为止（如：color、background-color、visibility等），浏览器会将新样式赋予元素并重新绘制它，这个过程称之为重绘

3、注意

重排（回流）一定引起重绘，重绘不一定引起回流

4、性能影响

重排(回流)比重绘的代价更高

5、如何避免

• CSS

• 避免使用 table布局
• 尽可能在 DOM树的最末端改变 class
• 避免设置多层内联样式
• 将动画应用到 position 属性为 absolute 或 fixed 的元素上
• 避免使用 css表达式（如：calc）

• JS

• 避免频繁操作样式（最好一次性重写 style 属性，或者将样式列表定义为 class并一次性更改 class属性）
• 避免频繁操作 DOM（创建一个documentFragment，在它上面应用所有 DOM操作，最后再把它添加到文档中）
• 也可以先为元素设置为 display:none，操作结束后再把它显示出来（因为在 display属性为 none的元素上进行的 DOM操作不会引发重排（回流）和重绘）
• 避免频繁读取会引发重排（回流）/ 重绘的属性（如果确实需要多次使用，就用一个变量缓存起来）
• 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁重排（回流）和重绘