深入理解回流与重绘

在理解回流与重绘之前，我们需要知道网页呈现在我们面前之前都发生了什么，

在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了当前HTML里所有的信息，例如标签，例如样式，例如JS逻辑。
浏览器会把所有样式(用户定义的CSS)解析成浏览器能识别并呈现出来的结构样式体，而当DOM树和结构样式体组合后就会构建成render树，这个render树类似于DOM树，但有一定的区别，
前者是能够识别HTML中的标签与内容，而后者能识别HTML中的CSS样式，render tree中每个节点都有自己的样式，而且render树不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render树中。

回到主题

什么是回流？

简单粗暴的来讲，就是HTML页面的结构出现了变化，需要重新加载，这就是回流。例如增加或减少一个div标签，那么页面就会刷新一次，因为浏览器解析DOM树发现有了不一样的的地方，他就会重新再来一遍，这个时候，就叫做回流。
每个页面至少会发生一次回流，就是在页面第一次加载的时候，因为浏览器解析了生成DOM树与render树，两相结合，形成了我们所看到的页面。

什么是重绘？

这就更简单了，当render树中的样式发生了变化，而这些变化只是简单影响了了HTML中元素的表现，风格而不会影响到布局结构时，比如background-color背景色时，则被称为重绘。

区别？

既然两者都会发生变动，那么他们之间有区别吗？
有区别，而且还很大。
回流必将出现重绘，但重绘不一定会引起回流，
一个简单的例子，当你添加或删除了DOM元素，改变了元素的位置，元素的宽高，边框，外边距，内边距与内容时，就会引起重绘，
与之相对的，当你仅仅只是添加了一个类名样式时（不包括display：none之类的会改变结构的样式！），则只会引起重绘。