如何在解析 DOM 樹之前打印 HTML？

Question

我在https://web.dev/howbrowserswork/#The_main_flow 讀到，打印網站是一個漸進的過程，不會等到 DOM/CSS/RENDER/LAYOUT 樹被完全解析。

重要的是要了解這是一個漸進的過程。 為了更好的用戶體驗，渲染引擎會盡快在屏幕上顯示內容。 在開始構建和布局渲染樹之前，它不會等到所有 HTML 被解析。 部分內容將被解析和顯示，而該過程繼續處理來自網絡的內容的 rest。

我試圖找到一個例子來測試它。 對於下面的 HTML，我希望先打印綠色框，然后阻塞 JS，然后渲染黃色框：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <div style="height:300px;width:700px;background-color:green"></div>
    <script>
    function sleep(milliseconds) {
      const date = Date.now();
      let currentDate = null;
      do {
        currentDate = Date.now();
      } while (currentDate - date < milliseconds);
    }

    console.log("Hello");
    sleep(2000);
    console.log("World!");
    </script>    
    <div style="height:300px;width:700px;background-color:yellow"></div>
  </body>
</html>

然而，在 Chrome 和 Firefox 上測試，什么都不會顯示，兩秒鍾后綠色和黃色框將同時顯示。

為什么我的示例不作為一個漸進的過程打印？ 你能提供一個漸進打印過程的例子嗎？

Answer 1

正如其他人所說，您正在阻止使用該代碼進行渲染。 對於您要完成的工作，更好的方法可能是在 javascript 中設置超時，然后通過操作 DOM 在延遲后添加您想要添加的元素。

setTimeout( () => {
   const elem = document.createElement('div');
   elem.style.cssText = 'height:300px;width:700px;background-color:yellow';
   document.body.appendChild(elem);
}, 2000);

另一種更好的方法可能是使用 CSS 在設定時間后使用 CSS 動畫顯示隱藏元素。

yet another option would be to use a class to hide the element from rendering display: none , then remove that class, or add another class that changes display, using javascript and a timeout.

如何在解析 DOM 樹之前打印 HTML？

問題描述

1 個解決方案

解決方案1
0 2022-07-25 19:42:51

如何在解析 DOM 樹之前打印 HTML？

問題描述

1 個解決方案

解決方案1 0 2022-07-25 19:42:51

解決方案1
0 2022-07-25 19:42:51