为什么在chrome开发工具中重新计算样式之前对js进行评估?

该文章说,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开发工具中重新计算样式之前对js进行评估?的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>