如何解决LiveServer加载Canvas HTML页面时持续加载的问题

Live Server扩展本身没有损坏，页面一直卡在加载状态的核心原因是你的JavaScript代码存在无终止条件的死循环，直接阻塞了浏览器的JS执行主线程，导致页面永远无法完成渲染和加载流程。

查看你Main_Game.js文件的末尾代码：

var Moneys = 0;
while (true) {
   Moneys += 1;
}

浏览器执行JS是单线程模型，运行到这段没有任何跳出条件的while(true)循环时，会无限执行循环内的逻辑，既不会继续完成后续DOM渲染，也不会触发页面加载完成的事件，外在表现就是页面一直处于加载状态，和Live Server服务本身无关。

• 第一步直接删除上述无意义的死循环代码。如果你是要做游戏的逐帧逻辑更新，不要用裸写的死循环实现，改用浏览器原生提供的requestAnimationFrame实现帧循环，这种方式不会阻塞主线程。
• 额外优化点：你HTML中用document.write(Moneys)输出金币值的写法不推荐，后续如果要实时更新金币数值，直接操作对应DOM节点的文本内容即可，避免document.write带来的页面重写问题。

如果要实现金币持续累加的效果，正确的帧循环写法参考：

// 原有canvas初始化、绘制的代码全部保留
var Moneys = 0;
// 获取金币显示的DOM节点
const tooltip = document.querySelector('.tooltip');

function gameLoop() {
  Moneys += 1;
  // 更新金币显示文本
  tooltip.textContent = `Money: ${Moneys}`;
  // 递归调用下一帧
  requestAnimationFrame(gameLoop);
}
// 启动游戏循环
gameLoop();

修改完成后保存文件，Live Server触发热重载后页面即可正常加载，不需要重装扩展、修改服务端口或者调整其他Live Server配置。

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