Javascript 为什么网站在托管后会导致大多数元素在发生微小变化时被重新计算？

我决定做一个吃豆人游戏，在我做了之后，在本地文档上一切都很好，我把我的网站推到Github页面上，fps的减少是巨大的。原来佩奇正在对数百个元素进行重新计算，这导致了20毫秒以上的延迟

这里有一小部分代码在本地页面和网站托管的github页面之间仍然存在性能差异

const gameBoard=document.getElementById（“游戏板”）；
const root=document.documentElement.style；
让元素；
let字符节点；
让位置=658；
makeLevel（）；
函数makeLevel（）{
for（设i=0；i<868；i++）{
常量元素=document.createElement（“DIV”）；
element.style.backgroundPosition=`0`；
让character=document.createElement（“DIV”）；
character.className=“黄色”；
元素。追加（字符）；
gameBoard.append（元素）；
}
元素=数组.from（gameBoard.children）；
characterNode=元素[658]。子元素[0]；
changePosition（）；
}
函数changePosition（）{
setProperty（`--yellow-sprite-y`、`-32px`）；
characterNode.style.transform=`translateX（-20px）`；
设置超时（（）=>{
characterNode.style.transform=“”；
characterNode.classList.remove（`yellow visible`）；
位置=位置-1；
characterNode=元素[position]。子元素[0]；
characterNode.classList.add（`yellow visible`）；
changePosition（）
}, 200)
}

：根目录{
--黄色精灵-y:-32px；
}
#游戏板{
宽度：560px；
高度：620px；
显示：网格；
网格模板列：重复（2820px）；
背景色：#000000；
}
#游戏板>*{
位置：相对位置；
宽度：20px；
高度：20px；
}
黄先生{
位置：绝对位置；
顶部：-4px；
左：-5.5px；
宽度：30px；
高度：28px；
z指数：10；
}
.可见黄色{
背景图像：url（“https://i.imgur.com/SphNpH6.png");
背景位置：-32px变量（--yellow-sprite-y）；
过渡：变换200ms线性；
}

收到一些反馈后，我在CodePen上分享了我的网站对其他用户很好，而且效果也很好。第二天，有人说可能会有一个扩展可以做类似的事情，而且确实会导致性能下降。

没有，影响JS运行时性能的唯一因素是引擎及其运行的设备。此外，使事情“异步”并不一定会加快事情的速度。“托管网站的运行速度是否比本地网站慢？”否。“这是因为Github页面吗？”可能不是。“有没有一种快速修复方法可以使网站的运行速度比localhost慢得多？”如果没有看到代码，很难说。但不要在你的问题中发布所有信息（或链接）。取而代之的是，按照这里描述的尽可能减少的过程进行：“我决定用vanilla js制作这个游戏，这意味着没有画布”不，它没有。想必您正在做一些事情来显示事物的位置——显然不是画布，但可能是DOM，等等。DOM与画布不同，它不是JavaScript的一部分（事实上，画布是DOM的一部分），我删除了一些不必要的内容或评论已经回答了的内容，以引起对主要问题的注意。