浏览器渲染只之---回流、重绘

1、回流

当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为回流。

在触发回流（重排）的时候，由于浏览器渲染页面是基于流式布局的，所以当触发回流时，会导致周围的DOM元素重新排列，它的影响范围有两种：

全局范围：从根节点开始，对整个渲染树进行重新布局
局部范围：对渲染树的某部分或者一个渲染对象进行重新布局
 

• 浏览器窗口大小发生改变
• 添加、删除可见DOM元素
• 元素尺寸改变-边距、填充、边框、宽、高
• 元素字体大小变化
• 激活 CSS 伪类，比如 :hover
• 计算offsetWidth和offsetHeight属性

一些常用且会导致回流的属性和方法:

• clientWidth,clientHeight,clientTop,clientLeft
• offsetWidth,offsetHeight,offsetTop,offsetLeft
• scrollWidth,scrollHeight,scrollTop,scrollLeft,scrollIntoView()

2、重绘

当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这个过程就是重绘。

• color、background 相关属性：background-color、background-image 等
• outline 相关属性：outline-color、outline-width 、text-decoration
• border-radius、visibility、box-shadow
   

3、性能影响

回流比重绘的代价要更高

对于如何优化动画，我们知道，一般情况下，动画需要频繁的操作DOM，就就会导致页面的性能问题，我们可以将动画的position属性设置为absolute或者fixed，将动画脱离文档流，这样他的回流就不会影响到页面了。