1、浏览器接收到 HTML 文件并转换为 DOM 树：
数据->字符串->通过词法分析转换为标记->node->dom
2、将 CSS 文件转换为 CSSOM 树
注意优化点：浏览器得递归 CSSOM 树，避免写过于具体的 CSS 选择器，也尽量少的添加无意义html标签，保证层级扁平。
3、生成渲染树
渲染树只会包括需要显示的节点和这些节点的样式信息，如果某个节点是 display: none 的，那么就不会在渲染树中显示。
当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流），然后调用 GPU 绘制，合成图层，显示在屏幕上。
为什么操作 DOM 慢
1、DOM 是属于渲染引擎内容，JS 又是 JS 引擎内容。当我们通过 JS 操作 DOM 的时候，其实这个操作涉及到了两个线程之间的通信，那么势必会带来一些性能上的损耗。操作 DOM 次数一多，也就等同于一直在进行线程之间的通信，
2、操作 DOM 可能还会带来重绘回流的情况。
阻塞渲染：当浏览器在解析到 script 标签时，会暂停构建 DOM
解决方案：
1、降低一开始需要渲染的文件大小，并且扁平层级，优化选择器。
2、给 script 标签添加 defer（JS 文件会并行下载，但是会放到 HTML 解析完成后顺序执行） 或者 async （表示异步： JS 文件下载和解析不会阻塞渲染）。
重绘（Repaint）和回流（Reflow）
重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘
回流是布局或者几何属性需要改变就称为回流。
减少重绘和回流:
使用 transform 替代 top
使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
尽量不使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
