Live Server页面无限加载 canvas动画JS代码运行故障排查

故障根因 #

页面无限加载、卡死的核心原因是JavaScript代码中写了无退出条件的while(true)死循环。
浏览器中JS执行和页面渲染共用同一条主线程，死循环会持续占用全部线程资源，浏览器既没有机会完成页面初始渲染，也无法响应任何交互，最终表现为页面一直加载、无响应，这个故障和Live Server工具本身无关。

现有代码的其他问题 #

• 动画逻辑缺少清屏步骤：即使循环能正常执行，每次绘制新位置的方块时没有擦除上一帧的内容，最终画布上会留下连续的矩形拖痕，无法实现单块移动的效果。
• HTML结构不规范：缺少标准的<!DOCTYPE>声明、<head>和<body>标签，虽然部分浏览器可以容错解析，但存在兼容风险。
• 动画实现方式错误：Canvas帧动画不能用普通死循环实现，必须匹配浏览器的渲染节奏执行绘制逻辑。

修正后可运行代码 #

HTML文件代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>移动方块动画</title>
</head>
<body>
    <canvas id="canvas" height="500" width="500"></canvas>
    <script src="sus.js"></script>
</body>
</html>

sus.js 文件代码 #

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
let x = 50
// 控制方块移动速度，数值越大移动越快
const speed = 2

function drawFrame() {
    // 清空整个画布，清除上一帧的绘制内容
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    // 绘制画布边框
    ctx.strokeRect(0, 0, canvas.width, canvas.height)
    // 绘制当前位置的方块
    ctx.fillRect(x, 50, 50, 50)
    // 更新方块横坐标
    x += speed
    // 可选：方块移出画布右侧后重置到左侧，实现循环移动效果
    if (x > canvas.width) {
        x = -50
    }
    // 请求浏览器在下一次重绘前执行当前函数，形成流畅动画
    requestAnimationFrame(drawFrame)
}

// 启动动画
drawFrame()

排查操作步骤 #

• 首先删除原有JS代码中的while(true)死循环块，这是导致页面卡死的直接原因。
• 补全HTML标准结构，将canvas、script标签放入body标签内。
• 将动画逻辑替换为requestAnimationFrame驱动的帧循环，每次绘制前先清空画布，再绘制当前帧内容、更新坐标。
• 保存所有文件后，通过Live Server重新打开页面即可看到正常运行的移动方块动画。

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