经典面试题---回流？重绘？如何优化？

回流和重绘是由于浏览器的再次渲染所引起的一个话题，我们首先要知道浏览器的渲染过程：

通常来说，渲染引擎会解析HTML文档来构建DOM树，与此同时，渲染引擎也会用CSS解析器解析CSSDOM树。接下来，DOM树和CSSDOM树关联起来构成渲染渲染树(render tree)，然后浏览器根据渲染树布局，渲染整个页面。

回流：当渲染树(render tree)的一部分或者全部元素因为尺寸，布局，显示和隐藏，或者元素内部的文字结构发生变化，导致页面需要重新构建页面的时候，回流就产生了。
重绘：当一个元素的尺寸，布局，显示和隐藏没有改变，而是改变了元素的外观风格的时候(比如修改字体颜色)，重绘就发生了。

结论：回流必定触发重绘，而重绘不一定触发回流。回流会导致渲染树需要重新计算，开销比重绘大，所以我们要尽量避免回流的产生。

回流的产生

1. 页面第一次渲染，在页面发生首页渲染的时候，所有组件都需要进行首次布局，这