渲染机制

浏览器的渲染机制一般分为一下几个部分：

1. 处理HTML并构建DOM树
2. 处理 CSS 构建 CSSOM 树
3. 将 DOM 与 CSSOM 合并为一个渲染树 render tree
4. 根据渲染树来布局，计算每一个节点的位置
5. 调用GPU绘制，合成图层，显示在屏幕上

在构建CSSOM树的时候，会阻塞渲染，直到CSSOM树构建完成。并且构建CSSOM树是一个非常消耗性能的过程，所以因应该尽可能的保证层级扁平化，减少过度层叠，越是具体的CSS选择器，执行速度越慢。

当HTML解析到script标签的时候，会暂停构建DOM，完成之后才会从暂停的地方重新开始。也就是说，如果你想要首屏渲染的快，就不应该再首屏就加载JS。

<script>标签打开defer或async属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。 defer与async的区别是：defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

load事件和DOMContentLoaded事件的区别：

1. Load事件触发代表页面中DOM，CSS，JS，图片等已经全部加载完毕了。

2. DOMContentLoaded事件表示初始的HTML被完全加载和解析了，不需要等待CSS，JS，图片加载。