先让我们看一下这段html代码demo
<html>
<head>
<script src="test1.js"></script>
<script src="test2.js"></script>
<link href="test1.css" rel="stylesheet" type="text/css" />
<link href="test2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="test">
<h2>js的加载</h2>
<p>CSSOM Tree</p>
<p>DOM Tree</p>
<p>render Tree</p>
</div>
</body>
</html>
浏览器是如何加载这段html代码呢？
首先是上到下按顺序加载的，在head里面遇到JS（xxxx.js）文件一般情况下同步加载。遇到一个加载一个，此时JS的加载会阻止CSS加载，JS的加载和CSS的加载的是互斥的，同一时刻只能加载一个。 而到了CSS（xxx.css）文件时候会异步加载，和DOM Tree是并行的，会将相应的CSS元素加载到CSS tree上
而加载到了body里面的html标签等，会将标签元素挂着到DOM Tree树上，这是挂在了DOM Tree并不会解析具体的元素，如果学过数据结构图的相关知识，可以知道，这样的加载深度优先遍历的，先把Tree描绘出来，这样效率高。
CSS生成了CSSOM Tree，DOM生成了DOM Tree 将会合成一个Render Tree，进行相应的重绘和重排操作，最后渲染