如何在解析 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