CSS和JS对DOM解析和渲染的影响

结论：

（1）CSS不会阻止DOM解析，但会阻塞DOM渲染

（2）JS会阻塞DOM的解析和渲染

（3）CSS会阻塞JS的执行

1、CSS 对 DOM 的影响

        了解浏览器的解析渲染过程：先解析 DOM 形成 DOM 树；然后解析 CSS 形成 CSS树；然后 DOM 树和 CSS 树合并形成渲染树，再渲染生成页面。

① 由于 DOM 解析和 CSS解析是分开的，因此 CSS 文件不会阻塞 DOM 解析；

② 页面渲染需要 DOM 树和 CSS 树相结合，因此 CSS文件会阻塞页面渲染；

2、JS 对 DOM 的影响

        JS 可以对 DOM结构进行操作，如删除、修改、新增等。所以遇到 JS 文件会停止DOM 解析，限制性 JS。如果不这样做，而是一边执行 JS 一遍解析 DOM，如果解析完DOM 后，发现 JS 修改了 DOM，那之前解析的 DOM 就白费了。

3、CSS 与 JS 间的关系

        JS 脚本中的内容是需要获取 DOM 元素的 CSS 样式属性的，如果想获得正确的样式，就必须要等到所有的 CSS 加载完成。因此 CSS 会阻止 JS 的执行。

正常网页的加载流程：

1、浏览器一边下载 HTML 页面，一边开始解析

2、解析过程中如果出现 <script> 标签，就暂停解析，将控制权交给 JS引擎

3、如果 <script> 标签中引用了外部脚本，就下载该脚本

4、 <script> 标签执行完毕，控制权交还给渲染引擎，恢复往下解析 HTML网页

特殊：如果 外链JS 含有 defer = "true" 属性：

将并行加载 JS，到页面全部加载完成后才会按顺序执行脚本。

defer属性：告诉浏览器，等到DOM加载完成后再执行指定脚本

1、浏览器开始解析HTML网页

2、解析过程中，发现带有defer属性的script标签

3、浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本

4、浏览器完成解析HTML网页，此时再执行下载的脚本

特殊：如果 外链JS 含有 async= "true" 属性：

将不会依赖于任何 JS 和CSS的执行，此 js 下载完毕后立刻执行，不保证按书写顺序

async属性：告诉浏览器，js不会修改 DOM 和样式，故不必依赖其他的 js 和 css

1、浏览器开始解析HTML网页

2、解析过程中，发现带有async属性的script标签

3、浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本

4、脚本下载完成，浏览器暂停解析HTML网页，开始执行下载的脚本

5、脚本执行完毕，浏览器恢复解析HTML网页