渲染页面的过程
1、处理 HTML 标记并构建 DOM 树。
2、处理 CSS 标记并构建 CSSOM 树。
3、将 DOM 与 CSSOM 合并成一个渲染树。
4、根据渲染树来布局，计算每个节点的几何信息。
5、将各个节点绘制到屏幕上。
注意：
1、这五个步骤并不一定是按顺序一次性完成，当DOM 或 CSSOM被CSS或Javascript修改时，以上步骤就会重复执行。
2、关键渲染路径要求我们同时具有 DOM 和 CSSOM 才能构建渲染树。
阻塞渲染
CSS阻塞渲染
1、因为CSS被视为阻塞渲染的资源，所以浏览器在CSSOM构建完毕之前，不会渲染任何已处理的内容。
2、CSSOM 构建时，JavaScript执行将暂停，直到CSSOM 就绪。
3、CSS 不会阻塞HTML的解析,但是会阻塞渲染树的构建
所以我们需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。 也就是说，我们尽量把引入css的标签放在head标签内。
JS阻塞渲染
1、JS会阻塞DOM解析和渲染。
2、JavaScript 既可以读取和修改 DOM 属性，又可以读取和修改 CSSOM 属性。
所以，script 标签的位置很重要，在实际应用中我们通常把script标签放在body底部。
改变阻塞模式：defer 与 async
由于存在前文所说的阻塞情况，我们需要改变这些情况，改变方式就包括defer和async
使用方法
将defer和async加在script标签上：
<script src="main1.js" defer></script>
<script src="main2.js" async></script>
defer
defer表示延迟执行引入的 JavaScript。
文档按顺序解析，当遇到JavaScript脚本时开始下载，同时HTML也继续在解析，这两个过程是并行的。如果脚本下载完成，会等到文档解析完毕才会开始执行。
async
async表示异步引入Javascript。
和defer前面一样，文档按顺序解析，当遇到JavaScript脚本时开始下载，同时HTML也继续在解析，但不同的是，脚本下载完成之后，如果文档还未解析完成，则停止解析，先执行下载好的脚本。
注意：
defer、async 对 inline-script 无效
<script async>
console.log("1");
</script>
<script defer>
console.log("2");
</script>
<script>
console.log("3");
</script>
这样和没有加是一样的，控制台还是按顺序打出123。
总结
浏览器渲染过程按照前文的五个步骤执行，并且可能有重复执行的可能。
CSS 不会阻塞 DOM 的解析，但会阻塞 DOM 渲染。JS既阻塞DOM解析，又阻塞DOM渲染。
优化阻塞渲染的方法有async和defer。
<script>最好放底部，<link>最好放头部，如果头部同时有<script>与<link>的情况下，最好将<script>放在<link>上面。
