为什么在 chrome 开发工具中重新计算样式之前对 js 进行评估？
Jil*_*dMe 8 html javascript css google-chrome-devtools
该文章说，CSS被渲染阻挡所以JS会建立一个CSSOM后评估（又名重新计算的开发工具样式）
但是，在 Chrome 开发工具中。似乎js是在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>
<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>
回答
我认为当您在 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，它也会比重新计算样式执行得更快，然后在 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 cnt=0
while(cnt++ <=9999999){}
</script>
</body>
<!-- <script src="test.js"></script> -->
</html>
| 归档时间： |
|
| 查看次数： |
301 次 |
| 最近记录： |