详细介绍下回流与重绘（面试总结）

首先我们先了解下浏览器的渲染机制：

1.浏览器采用的是流式布局模型
2.浏览器在解析过程中会将html解析成DOM，然后再把css解析成为CSSOM,CSSOM和DOM结合成为了render tree
3.在有了render tree之后，我们就知道了节点样式，然后浏览器会计算出每个节点的位置，在把每个节点绘制(渲染)到页面上

先简单介绍一下
比如，我们给某个div设置上了白色，然后经过一些操作，我们使这个div的颜色变成了其他颜色，因为这个过程这个div的大小没有变，我们只是将这个div的颜色重新绘制了一下，所以这个过程就叫做重绘
因为浏览器采用的使流式布局，在我们将在某个位置的div移到另一个位置，又因为这个div的位置变了，那么除这个div之外的其他的标签节点的位置也会跟着改变，这种变化就叫做回流
总结：回流一定会引起重绘，但是重绘不一定会引起回流

回流

当我们render tree中的某些元素的结构或尺寸等发生改变，浏览器会重新渲染部分或者全部文档的这个过程就叫做回流。
一下是会导致回流的操作：

• 页面首次渲染（在页面首次渲染的时候必然是一次回流，首先这个节点的位置还没有确定，在首次渲染的时候这些元素一定是会变的，所以是引起了一次回流）
• 浏览器窗口的大小发生变化（现在很多页面的大小都是会随着浏览器的放大缩小而产生变化，在这个过程中也会引起回流）
• 内容的变换（比如，我们的验证码按钮的功能，在发送验证码之前，我们的button按钮中的内容是’发送验证码‘，在我们点击发送验证码之后，这个button按钮的内容就会编程一个倒计时，在这个过程也会引起回流）
• 添加或者删除节点
• 激活css伪类
• clinentWidth(获取窗口)

重绘

当页面中元素样式的改变不影响它在文档流中的位置，浏览器会将新样式赋给这个元素，这个过程就叫做重绘。
一下是会导致重绘的操作：

• background（控制元素的背景样式）
• visibility（控制元素的透明度）

回流和重绘对性能的影响

总结：回流的性能消耗要不重绘大。
回流和重绘都会对性能产生影响只是大小不同罢了

在我们知道回流和重绘会对性能造成影响后应该怎么避免呢？

如何避免回流和重绘对性能造成的影响

能重绘尽量不使元素回流
首先从css开始:

• 避免使用table布局（在浏览器渲染页面时，因为table是一个元素，table里面含有很多的标签，比如th,tr,td等标签元素，浏览器会先对table以及table里面的所有标签全部计算完之后，才会进行后面的其他标签的计算，在这个等待的过程中用户体验是及其不好的）
• 避免设置多层内联样式
  JavaScript:
• 避免频繁操作DOM
• 对于大量插入DOM的操作，建议使用文档片段，也就是documentFragment。