浏览器渲染流程

网页生成的过程

1. HTML 代码转化成 DOM
2. CSS 代码转化成 CSSOM（CSS Object Model）
3. 结合 DOM 和 CSSOM ，生成一颗渲染树（包含每个节点的视觉信息）
4. 生成布局（layout），即将渲染树的所有节点进行平面合成
5. 将布局绘制（paint）在屏幕上
   

回流和重绘

回流（reflow）：某个部分变化影响了布局，需要重新渲染
重绘（repaint）：改变某个元素的背景，文字颜色等，不会影响到周围的布局，屏幕的一部分需要重绘，但是元素等几何尺寸没有变。

回流必然导致重绘，比如改变一个元素的位置，就会同时出发回流和重绘，因为布局改变了。
重绘不一定导致回流，比如改变某个元素的颜色，只会出发重绘，因为布局没有改变

回流和重绘是导致页面性能不好的主要原因

提高性能

1. 多个读操作或多个写操作放在一起。
2. 如果某个样式是通过重排得到的，最好缓存结果，免得下次又要重排
3. 不要一条条的改变样式，而要通过 class，一次性改变样式
4. 把 DOM 离线后修改，比如，操作Document Fragment对象，完成后再把这个对象加入DOM。再比如，使用 cloneNode() 方法，在克隆的节点上进行操作，然后再用克隆的节点替换原始节点。
5. 先将元素设为 display:none （仅需一次重排和重绘），然后对这个节点进行100次操作，在恢复。
6. position 设为 fixed 或 absolute 的元素，重排的开销会比较小
7. visibility:hidden 的元素只对重绘有影响
8. 使用虚拟的 DOM 库，如 react