极客观点
项目管理
HarmonyOS
下面这段代码会先只显示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
}
引用 浏览器的工作原理：新式网络浏览器幕后揭秘
另，谷歌开发者文档，也有不少类似的描述。