回流重绘方向的性能优化

1.先从浏览器的渲染机制开始说起

1. 浏览器将获取的HTML文档并解析成DOM树。
2. 处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。
3. 将DOM和CSSOM合并为渲染树(rendering tree)将会被创建，代表一系列将被渲染的对象。
4. 渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次pass绘制操作就可以布局所有的元素。
5. 将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting.
6. 如果文档中有资源 重复以上流程 直至资源全部加载完毕

2.认识一下什么叫重绘与回流？

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

3.减少重绘与回流达到提升性能的效果

从上面的两点不难看出，重绘与回流是浏览器渲染过程中消耗资源的一大主要原因。
所以想要做性能优化就应该减少重绘与回流
那我们分开说：

从css角度

样式的更改尽量不要改变布局。引起回流。

从js角度

减少dom操作，文档碎片