为何渐进式HTML渲染测试示例无效？求有效实现示例

你的代码没能触发渐进式渲染，核心原因是同步JavaScript阻塞了浏览器主线程的渲染流程：

• 浏览器解析HTML时，遇到<script>标签会暂停后续HTML的解析，优先执行当前脚本。你的sleep函数是同步阻塞逻辑，会霸占主线程整整2秒。
• 这段时间里，浏览器根本没时间执行布局和绘制操作——哪怕绿色方块已经被解析到DOM树中，也无法显示在屏幕上。
• 只有当同步JS执行完毕后，浏览器才会继续解析后面的黄色方块，然后一次性完成所有DOM的布局与绘制，最终两个方块同时出现。

要实现渐进式渲染，关键是让浏览器在执行耗时操作前，先完成已解析内容的渲染。通过将耗时逻辑放入异步任务队列，释放主线程即可做到：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progressive Rendering Demo</title>
</head>
<body>
  <!-- 绿色方块会被优先解析并渲染 -->
  <div style="height:300px;width:700px;background-color:green"></div>
  
  <script>
    console.log("Hello");
    // 将耗时操作放入宏任务队列，让主线程先处理渲染
    setTimeout(() => {
      // 模拟2秒耗时操作
      const start = Date.now();
      while (Date.now() - start < 2000);
      
      console.log("World!");
      // 耗时操作完成后，动态添加黄色方块
      const yellowBlock = document.createElement('div');
      yellowBlock.style.cssText = "height:300px;width:700px;background-color:yellow;margin-top:10px";
      document.body.appendChild(yellowBlock);
    }, 0);
  </script>
</body>
</html>

示例生效的原因： #

• setTimeout(fn, 0)会把回调函数放入宏任务队列，当前同步脚本执行完毕后，主线程会先处理渲染队列，完成绿色方块的绘制。
• 2秒后宏任务执行，完成耗时操作后动态添加黄色方块，浏览器会触发新的布局与绘制，最终黄色方块延迟显示。

你也可以通过分块加载HTML、使用requestIdleCallback处理非紧急任务等方式实现渐进式渲染，上述示例是最直观的本地测试方案。

内容的提问来源于stack exchange，提问作者Adam