下面这段代码会先只显示aa， bb部分会等待test.js加载运行完后再显示，显然JS阻塞了DOM树的渲染，这么看来浏览器在DOM树都没有完全解析完毕之前就提前进行了一次DOM树+CSSOM树的合并后渲染了Layout，但是看了很多文章都没有提浏览器解析页面会去这么做，那浏览器遇到这种情况的解析逻辑是怎么样的呢？是能判断遇到长时间的阻塞就去提前先做一次渲染吗（First Paint)？
test.html
<html>
<head>
<style>
.mf {
background: greenyellow;
width: 200px;
height: 200px;
}
</style>
</head>
<body style="background: blue">
<div class="mf">aa</div>
<script src="./test.js"></script>
</script>
<div class="mf">bb</div>
</body>
</html>
./test.js
for ( var a = 0; a < 100000000; a++ ) {
var b = a * a
}
已解决
悬赏分：10
- 解决时间 2021-11-25 18:53
点赞 0反对 0举报 0
收藏 0
分享 0
回答2
最佳
-
- dom 是一边解析一边渲染的，
- css 则要加载解析完，才会渲染（自己猜测加验证，因为 css 的规则有覆盖情况，加载解析完，才能拿到最终的结果）
- 但是 body 里的 css 是特殊处理（自己猜测加验证）
引用 浏览器的工作原理：新式网络浏览器幕后揭秘
需要着重指出的是，这是一个渐进的过程。为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。
另，谷歌开发者文档，也有不少类似的描述。
支持 0 反对 0 举报2021-11-25 15:37
