回流Reflow和重绘Repaint

在了解回流和重绘之前，我们先来了解一下浏览器是如何进行解析的
我将它归纳为四个步骤：

1. 解析html(或者是js通过createElement)生成DOM树
2. 解析css，绘制上面是DOM树（注意！此时还未挂载到浏览器上）
3. 将DOM树挂载在浏览器上，计算各个DOM具体点的坐标，以及布局和大小（回流）
4. 在浏览器上绘制已经生成的DOM树（重绘）

回流的成本比重绘的成本高很多很多！！！ 一个节点的重流，可能会导致子节点或者父节点以及同级节点的重流 如果电脑低的话 会造成卡顿和更耗电

那说到现在，我们该如何去优化，使得回流和重绘对性能的影响减低到最小
我给出以下几点建议：

1. 不要一行行的代码对DOM的样式进行修改，我们可以预先定义好某一个类的样式，直接给DOM新的类名
2. 我们将DocumentFragment作为一个暂时的DOM节点存储器，在里面进行修改DOM(下面有关于DocumentFragment详细描述)
3. 先将DOM变成display：none 再进行修改 这个过程只有一次重绘
4. 尽量为动画的DOM设置固定定位或者绝对定位，那么修改他们的样式会大大减少回流
5. 尽量少用table布局 因为这种布局 很可能小小改动，造成重新布局

DocumentFragment 表示一个没有父级文件的最小文档对象。
它被当做一个轻量版的 Document使用，
用于存储已排好版的或尚未打理好格式的XML片段。
最大的区别是因为DocumentFragment不是真实DOM树的一部分，
它的变化不会引起DOM树的重新渲染的操作(reflow)
且不会导致性能等问题。
使用DocumentFragment能解决直接操作DOM引发大量回流的问题，

time是直接添加DOM time1是利用DocumentFragment