為什么在重新計算 chrome 開發工具中的樣式之前評估過 js？

Question

文章說 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>

Answer 1

這篇文章的作者關注的是domContentLoaded事件，或者在頁面准備好呈現給用戶的那一刻，不再出現白屏。 當藍色垂直線出現在時間線中時很重要。 這是了解頁面對用戶可用的速度的重要事件。 在內容出現之前，用戶必須盯着白屏多長時間？

由於單頁應用程序的出現，幾乎所有內容只有在主腳本加載后才可用。 這就是為什么如此多的頂級 web 應用程序首先使用服務器端渲染頁面，然后 javascript 控制單頁面應用程序。 他們甚至使用代碼拆分來加載當前頁面所需的內容。

本文深入探討了包含外部 CSS 和 js 文件的效果。 這些文件的加載和解析如何推動domContentLoaded事件，這意味着將白屏更改為內容會出現更多延遲，即使內容 (HTML) 已經解析並准備好呈現。

性能事件日志確實顯示了正在發生的事情的詳細信息，但如果您進一步向下滾動，您可以找到Event:readystatechange和Event:pageshow ，它們表示內容呈現給用戶的時間戳。 這些事件在腳本和樣式計算之后。 <script>行阻止domContentLoaded事件，直到他可以完成他的事情。

這就是為什么建議對 script 標簽使用async屬性，這樣它就不會阻塞白屏。 想象一下，如果我們添加到網頁的所有外部腳本也阻止了頁面呈現。 延遲對用戶來說將變得如此明顯，以至於他/她可能決定離開。

希望這能解釋您的查詢。

Answer 2

回答

我認為當您在 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 Parsing => CSSOM => evaluate script

<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>

為什么在重新計算 chrome 開發工具中的樣式之前評估過 js？

問題描述

2 個解決方案

解決方案1
1 2021-05-20 16:27:07

解決方案2
1 已采納 2021-05-27 02:17:15

回答

優化的工作原理

為什么在重新計算 chrome 開發工具中的樣式之前評估過 js？

問題描述

2 個解決方案

解決方案1 1 2021-05-20 16:27:07

解決方案2 1 已采納 2021-05-27 02:17:15

回答

優化的工作原理

解決方案1
1 2021-05-20 16:27:07

解決方案2
1 已采納 2021-05-27 02:17:15