下面这段代码会先只显示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