先讓我們看一下這段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，進行相應的重繪和重排操作，最後渲染