CSS加载不会阻塞DOM树解析
1、css的加载不会阻塞DOM树解析。
1)、css加载不会阻塞DOM树的解析;
2)、css加载会阻塞DOM树渲染;
先把DOM树结构先解析完,等CSS加载完后根据最终样式渲染DOM树,免了css加载完之后DOM树又得重新重绘或者回流等一系列没有必要的损耗。
3)、css加载会阻塞后面js执行;
4)、JS阻塞DOM解析,但浏览器会偷看DOM后内容,预先下载相关资源。
浏览器遇到<script>且没有defer或async标签时,会触发页面渲染,因而如果前面css资源尚未加载完毕时,浏览器会等待它加载完毕在执行脚本。)
如下图,页面已经显示内容,但还没有加载css样式表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Title</title>
<style>
h1 {
color: red !important;
}
</style>
<script>
function h() {
console.log(document.querySelectorAll("h1"));
}
setTimeout(h, 0);
</script>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>这是红色的</h1>
</body>
</html>
看了两天的浏览器渲染机制,想告诉自己的是:
当看到页面出现在浏览器上时,所有的html/css/js文件都是完全解析执行完了的,如果有疑惑,去看构建对象-构建渲染-布局-渲染过程图。
所有不存在说,当<script>(控制台输出元素)在<link>(改变元素的颜色)前,并且css文件大于js文件很大时,会先在控制台看到<script>执行内容,然后过了一段时间,<link>加载完了,页面元素的字体颜色才会改变。
而事实上是,页面能显示时,一定是所有.css/.js/dom结合一起渲染完的结果,至于显示时间,要看各个文件的加载时间,故有优化加载说法。
20210514
js的执行会受到标签前面css文件的影响(注意执行、标签前面)。
如果标签前面有样式文件,需要样式文件加载并解析完后才执行这段内联的脚本;
如果是外联的,则会先去加载脚本,然后执行,在处理完脚本之后,浏览器便继续解析HTML文档。
CSSOM构建会影响DOM解析、js执行?
<head>
<link href="https.cssFile.css" stylesheet="relative" />
<script src="https.jsFile.js"></script>
</head>
如上述代码,在解析DOM时,解析到了<link>标签,于是先去加载css文件进行构建;
CSSOM的构建和DOM的解析是可以同时进行的。这时,可以解析到了<script>标签。但由于CSSOM对象未构建完成,所以DOM解析会在<script>标签这里卡住(js可以查询任意对象样式),而js未能加载执行完时,不能进行下一个DOM节点解析。
(所以DOM构建也间接被CSSDOM阻塞了:CSSOM构建阻塞JS,而JS阻塞DOM解析)
综上,HTML是之上而下开始执行的,也就是说,为了DOM能以最快的速度被渲染完,CSSOM、DOM可以先构建(这两个可以同时进行),最后JS加载执行,也就是不要出现<link>、<script>标签于文档位置多次出现,而<link>位于头部,<script>位于尾部最好。
——不知道的事情很多,带着求知的心态,一点点去解答心中疑惑,唯时间、精力能带给自己充实。
浏览器内部工作原理(参考):
https://kb.cnblogs.com/page/129756/
https://zhuanlan.zhihu.com/p/74792085
https://blog.csdn.net/XIAOZHUXMEN/article/details/52014901
https://www.cnblogs.com/dahe1989/p/11765066.html
https://www.cnblogs.com/dahe1989/p/11765066.html