为什么在chrome开发工具中重新计算样式之前对js进行了评估？
article说CSS是渲染阻塞，所以js将在构建CSSOM(也称为.在开发工具中重新计算样式)
但是，在Chrome开发工具中。似乎js在CSSOM之前被评估，为什么呢？我是不是误解了？
如果你想看我的例子=> here
调用树
事件日志
<html>
<head>
<style>
h1 {color:red;}
p>p {color:blue;}
p>p>p {color:blue;}
p>p>p>p {color:blue;}
p>p>p>p>p {color:blue;}
p>p>p>p>p>p {color:blue;}
p>p>p>p>p>p>p {color:blue;}
p>p>P>p>p>p>p>p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
<script>
var span = document.getElementsByTagName('span')[0];
span.textContent = 'interactive'; // change DOM text content
span.style.display = 'inline'; // change CSSOM property
// create a new element, style it, and append it to the DOM
var loadTime = document.createElement('div');
loadTime.textContent = 'You loaded this page on: ' + new Date();
loadTime.style.color = 'blue';
document.body.appendChild(loadTime);
var cnt=0
while(cnt++ <=9999999){}
</script>
</body>
</html>回答 2
Stack Overflow用户
发布于 2021-05-27 10:17:16
回答
我认为当你在Chrome和IE11中使用内联或解析器阻塞脚本时，会有一些优化
当我在下面测试HTML时
<html>
<head>
<style>
h1 {color:red;}
p>p {color:blue;}
p>p>p {color:blue;}
p>p>p>p {color:blue;}
p>p>p>p>p {color:blue;}
p>p>p>p>p>p {color:blue;}
p>p>p>p>p>p>p {color:blue;}
p>p>P>p>p>p>p>p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
<script>
var span = document.getElementsByTagName('span')[0];
span.textContent = 'interactive'; // change DOM text content
span.style.display = 'inline'; // change CSSOM property
// create a new element, style it, and append it to the DOM
var loadTime = document.createElement('div');
loadTime.textContent = 'You loaded this page on: ' + new Date();
loadTime.style.color = 'blue';
document.body.appendChild(loadTime);
var cnt=0
while(cnt++ <=9999999){}
</script>
</body>
</html>IE11显示预期的顺序，但是并行执行的。HTML解析=> CSSOM =>求值脚本
另一方面，Chrome显示出意外顺序HTML解析=>值脚本=> CSSOM
所以我把内联脚本改成了外部脚本，现在Chrome可以按照预期的顺序执行HTML解析=> CSSOM =>计算脚本
<html>
<head>
<style>
h1 {color:red;}
p>p {color:blue;}
p>p>p {color:blue;}
p>p>p>p {color:blue;}
p>p>p>p>p {color:blue;}
p>p>p>p>p>p {color:blue;}
p>p>p>p>p>p>p {color:blue;}
p>p>P>p>p>p>p>p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
<script src="test.js"></script>
</html>
优化的工作原理
当你有内联脚本，那么它将比重新计算样式执行得更快，即使它不操作你的DOM或CSSOM，然后重新计算样式将在HTML解析在Chrome和IE11中完成后再执行一次。
<html>
<head>
<style>
h1 {color:red;}
p>p {color:blue;}
p>p>p {color:blue;}
p>p>p>p {color:blue;}
p>p>p>p>p {color:blue;}
p>p>p>p>p>p {color:blue;}
p>p>p>p>p>p>p {color:blue;}
p>p>P>p>p>p>p>p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
<script>
var cnt=0
while(cnt++ <=9999999){}
</script>
</body>
<!-- <script src="test.js"></script> -->
</html>
Stack Overflow用户
发布于 2021-05-21 00:27:07
这篇文章的作者关注的是domContentLoaded事件，或者当页面准备好呈现给用户时，不再有白屏。当蓝色垂直线出现在时间线中时，这很重要。这是一个重要的事件，可以了解页面对用户可用的速度。在内容出现之前，用户必须盯着白屏看多久？
由于单页应用程序的出现，几乎所有内容都只有在主脚本加载后才可用。这就是为什么如此多的顶级web应用程序使用服务器端呈现的页面，首先提交，然后javascript控制单页面应用程序。他们甚至使用代码拆分来加载当前页面所需的内容。
本文深入研究了包含外部CSS和js文件的效果。这些文件的加载和解析如何推送domContentLoaded事件，这意味着在将白屏更改为内容时会有更多延迟，即使内容(超文本标记语言)已经解析并准备好呈现。
性能事件日志确实显示了正在发生的事情的详细信息，但是如果您进一步向下滚动，您可以找到Event:readystatechange和Event:pageshow，它们表示内容何时呈现给用户的时间戳。这些事件发生在脚本和样式计算之后。<script>行阻止domContentLoaded事件，直到他可以完成他的事情。
这就是为什么建议对脚本标记使用async属性，这样它就不会阻塞白屏。想象一下，如果我们添加到网页的所有外部脚本也会阻止页面渲染。延迟对用户来说将变得如此明显，以至于他/她可能决定离开。
希望这能解释你的疑问。
https://stackoverflow.com/questions/67554818
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号