重绘和回流（Repaint & Reflow），以及如何进行优化

1.当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

浏览器引起回流的操作：

• 字体大小变化
• 元素尺寸、位置发生变化
• 增加或者删除可见的元素
• 激活伪类属性
• 访问某些位置信息
  注：浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。因为队列中可能会有影响到这些属性或方法返回值的操作，即使你希望获取的信息与队列中操作引发的改变无关，浏览器也会强行清空队列，确保你拿到的值是最精确的。
• clientWidth、clientHeight、clientTop、clientLeft
• offsetWidth、offsetHeight、offsetTop、offsetLeft
• scrollWidth、scrollHeight、scrollTop、scrollLeft
• scrollIntoView()、scrollIntoViewIfNeeded()
• getComputedStyle()
• getBoundingClientRect()
• scrollTo()

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

回流一定引起重绘，重绘不一定引起回流；

3.优化

css ：

• 避免使用css表达式（calc()）
• 避免使用table 布局
• 避免 使用层级很深的层连选择器
• 动画应用在 position 为  fixed 或 absolute

js：

避免 频繁的操作dom 样式

避免增加删除元素

避免频繁的访问 引起回流的属性，如果一定要用，也要 用变量缓存起来