HTML Canvas无法实时刷新及绘制内容延迟显示问题求助

浏览器的JavaScript执行和UI渲染共用主线程，遵循单线程事件循环机制。你的代码里，for (let i = 0; i < 10000; i++)这个同步循环会持续占用主线程，导致所有Canvas绘制操作（包括clearRect、蓝色线条的stroke）都只能在内存中暂存，直到主线程从循环中解放出来，浏览器才会统一执行UI渲染，把这些绘制结果显示到屏幕上。这就是为什么所有操作都要等程序完全跑完才生效。

要实现「先显示蓝色线条，执行完耗时任务后再显示粉色线条」的效果，需要把耗时的循环任务放到异步队列中，让主线程先完成UI渲染，再去处理耗时逻辑。以下是修改后的代码：

<!DOCTYPE html>
<html>
<body>

<canvas id="RoomCanvas" width="300" height="200">
<!-- ************************************* -->
<!-- The wall is always here               -->
<!-- ************************************* --> 
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("RoomCanvas");
var ctx = c.getContext("2d");

ctx.clearRect(0, 0, 300, 200);
doWall("blue", 0);

// 把耗时循环放到异步任务中，让主线程先完成UI渲染
setTimeout(() => {
  let x = 0;
  for (let i = 0; i < 10000; i++) {
    x = x + i;
  }
  // 耗时任务完成后绘制粉色线条
  doWall("pink", 47);
}, 0);

function doWall(theColor, xlocation){
  ctx.beginPath();
     ctx.moveTo(xlocation, xlocation);
     ctx.lineTo(xlocation, 100);
  ctx.closePath();
  ctx.lineWidth = 8;
  ctx.strokeStyle = theColor;
  ctx.stroke();
}
</script>

</body>
</html>

修改说明 #

• 把原来的同步循环放到setTimeout回调里，setTimeout会把任务加入异步队列，主线程先执行完当前的绘制代码（clearRect、蓝色线条）并完成UI渲染，之后再执行循环任务。
• 循环任务完成后，再调用doWall绘制粉色线条，此时主线程空闲，绘制操作会立即被渲染到屏幕上。

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