浏览器渲染页面的流程

第一步：输入url，通过DNS解析获取服务器的地址

第二步：经过TCP三次握手，简历链接，并获取html文件

第三步：解析html，如果遇到一些外部的链接资源，浏览器会立即启动别的线程下载这些资源

第四步：如果在head中遇到js代码，html的解析会停留下来（就是常说的js阻塞网页的加载）

第五步：解析完成html后生成DOM树

第六步（和第五步并行）：下载完css文件后，解析生成cssom树

（CSSOM树的解析和DOM树的解析式并行的，但是render tree的生成时需要依赖DOM和CSSOM，所以css不会阻塞dom的解析，但是会阻塞dom的渲染）

第七步：生成渲染树

第八步：计算各节点在网页中的位置（也就是常说的布局）

第九步：绘制

Tip：JS 文件放在 head 中属于同步加载，会阻塞 DOM 树的构建，进而影响页面的加载。当 JS 文件较多时，页面白屏的时间也会变长

解决方案：

1、 script 放在 body 里（一般是 </body>上面）

由于 DOM 是自上而下解析的，因此 JS 不会阻塞 DOM 的解析，而且这时候可以在 JS 中操作 DOM

2、设置 defer 属性

通过给 script 标签设置 defer 属性，将脚本文件设置为延迟加载，当浏览器遇到带有 defer 属性的 script 标签时，会再开启一个线程去下载 JS 文件，同时继续解析 HTML，等 HTML 全部解析完、DOM 加载完成之后，再去执行加载好的 JS 文件。只适用于引用外部 JS 文件，并且可以确保所有加了 defer 属性的脚本会按顺序执行