DOM、CSSOM、js的关系一、DOM和js 当html代码中带有插入的js脚本时：当HTML解析器遇到js代码时，

一、DOM和js

当html代码中带有插入的js脚本时：

 <html>
<body>
    <div>1</div>
    <script>
    let div1 = document.getElementsByTagName('div')[0]
    div1.innerText = 'time.geekbang'
    </script>
    <div>test</div>
</body>
</html>

当HTML解析器遇到js代码时，会暂停DOM的解析，转而由js引擎去执行这段代码。

当html代码中带有外部的js文件时：

 <html>
<body>
    <div>1</div>
    <script type="text/javascript" src='foo.js'></script>
    <div>test</div>
</body>
</html>

当HTML解析器遇到script标签时，会暂停DOM解析，先下载js文件，下载完了再去执行，等js执行完了之后，再继续执行html解析。

注意：js、css文件的下载也会阻塞Html的解析。

chrome对此做了一些优化，就是它的预解析操作。

1、预解析操作

在渲染引擎接收到字节流时，会开启一个预解析线程，去分析html中有没有js、css文件，如果有，就会去提前下载。

二、DOM、CSSOM、js的关系

DOM树的解析和CSSOM树的解析时同步进行的，但是当解析js的时候，js引擎会先判断以下CSSOM树有没有生成，如果没有生成会等待CSSOM树生成完了之后，才会去执行js。

三、优化

cdn加速。
压缩js文件的体积。
如果js中没有操作dom，就可以设置为异步加载，async或者defer。