JavaScript无限循环阻塞canvas画布绘制的问题该如何解决？

你代码的核心问题是JS单线程的运行机制和浏览器渲染逻辑冲突：
浏览器的JS执行、DOM更新、页面渲染都跑在同一个主线程上，同步的do-while(1)死循环会持续占用主线程，就算你执行了canvas的绘制API，浏览器也没有空闲时间把绘制结果刷新到页面上，所以你看不到任何渲染效果。你用到的sleep如果是同步实现的，还会进一步阻塞主线程，加重问题。

方案1：使用requestAnimationFrame实现动画（推荐） #

requestAnimationFrame是浏览器专门为动画场景提供的API，会在每次浏览器准备重绘之前调用你传入的回调函数，既不会阻塞主线程，也能保证动画帧率和浏览器刷新率（通常是60fps）对齐，性能最优。
如果你需要和你原逻辑保持一致的25ms/帧的固定间隔，可以加上时间控制：

let lastRenderTime = 0
const frameGap = 25 // 对应你原代码的25ms间隔

function drawFrame(timestamp) {
  // 间隔不足就跳过本次渲染
  if (timestamp - lastRenderTime < frameGap) {
    requestAnimationFrame(drawFrame)
    return
  }
  lastRenderTime = timestamp

  // 绘制逻辑
  ctx.clearRect(0, 0, 400, 400)
  ctx.beginPath()    

  for (let i = 0; i < points.length; i++) {
    for (let target = 1; target <= 4; target++) {
      if (i + target >= points.length) continue
      ctx.moveTo(points[i][0], points[i][1])
      ctx.lineTo(points[i+target][0], points[i+target][1])
    }
  }
  // 统一描边，比循环里多次调用stroke性能好很多
  ctx.stroke()

  // 注册下一帧渲染
  requestAnimationFrame(drawFrame)
}

// 启动动画
requestAnimationFrame(drawFrame)

方案2：使用setInterval实现固定间隔渲染 #

如果不需要和浏览器刷新率对齐，也可以用setInterval实现固定间隔的渲染，写法更简单，但是时间精度不如requestAnimationFrame，页面切后台时会自动降频：

setInterval(() => {
  ctx.clearRect(0, 0, 400, 400)
  ctx.beginPath()    

  for (let i = 0; i < points.length; i++) {
    for (let target = 1; target <= 4; target++) {
      if (i + target >= points.length) continue
      ctx.moveTo(points[i][0], points[i][1])
      ctx.lineTo(points[i+target][0], points[i+target][1])
    }
  }
  ctx.stroke()
}, 25)

额外优化建议 #

你原代码中在嵌套循环里每次调用ctx.stroke()，会导致每绘制一条线就触发一次描边操作，性能损耗很大。可以把所有路径都添加完成后，在循环外统一调用一次ctx.stroke()，运行效率会明显提升。

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