如何解决为什么在 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>

解决方法

文章作者关注的是 domContentLoaded 事件，或者在页面准备好呈现给用户的那一刻，不再出现白屏。当蓝色垂直线出现在时间线中时很重要。这是了解页面对用户可用的速度的重要事件。在内容出现之前，用户必须盯着白屏多长时间？

由于单页应用的出现，几乎所有的内容都只有在主脚本加载后才可用。这就是为什么如此多的顶级 Web 应用程序首先使用服务器端呈现的页面，然后 javascript 控制单页应用程序。他们甚至使用代码拆分来加载当前页面上需要的内容。

本文深入探讨了包含外部 CSS 和 js 文件的效果。这些文件的加载和解析如何推动 domContentLoaded 事件，这意味着将白屏更改为内容的延迟更多，即使内容 (HTML) 已经解析并准备好呈现。

性能事件日志确实显示了正在发生的事情的详细信息，但是如果您进一步向下滚动，您可以找到 Event:readystatechange 和 Event:pageshow，代表内容呈现给用户的时间戳.这些事件在脚本和样式计算之后。 <script> 行阻止 domContentLoaded 事件，直到他完成他的事情。

这就是为什么建议对脚本标记使用 async 属性的原因，这样它就不会阻止白屏。想象一下，如果我们添加到网页的所有外部脚本也阻止了页面呈现。延迟对用户来说非常明显，以至于他/她可能会决定离开。

希望这能解释您的查询。

答案

我认为当你在 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 Parsing => evalute script => 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>