先让我们看一下这段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,进行相应的重绘和重排操作,最后渲染