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

CSS加载不会阻塞DOM树解析

推荐阅读