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

Question

我决定制作一个吃豆人游戏，在我完成之后，在本地文档上一切正常，我将我的网站推送到 Github 页，fps 大幅下降。原来页面正在对数百个元素进行重新计算，导致 20 毫秒以上的延迟。

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

const gameBoard = document.getElementById("game-board");
const root = document.documentElement.style;

let elements;
let characterNode;
let position = 658;

makeLevel();

function makeLevel() {
    for (let i = 0; i < 868; i++) {
        const element = document.createElement("DIV");
        element.style.backgroundPosition = `0 0`;

        let character = document.createElement("DIV");
        character.className = "yellow";
        element.append(character);
        gameBoard.append(element);
    }
    elements = Array.from(gameBoard.children);
    characterNode = elements[658].children[0];
    changePosition();
}
function changePosition() {
    root.setProperty(`--yellow-sprite-y`, `-32px`);
    characterNode.style.transform = `translateX(-20px)`;

    setTimeout(() => {
        characterNode.style.transform = "";
        characterNode.classList.remove(`yellow-visible`);
        position = position - 1;
        characterNode = elements[position].children[0];
        characterNode.classList.add(`yellow-visible`);
        changePosition()
    }, 200)
}

:root {
  --yellow-sprite-y: -32px;
}
#game-board {
  width: 560px;
  height: 620px;
  display: grid;
  grid-template-columns: repeat(28, 20px);
  background-color: #000000;
}
#game-board > * {
  position: relative;
  width: 20px;
  height: 20px;
}
.yellow {
  position: absolute;
  top: -4px;
  left: -5.5px;
  width: 30px;
  height: 28px;
  z-index: 10;
}
.yellow-visible {
  background-image: url("https://i.imgur.com/SphNpH6.png");
  background-position: -32px var(--yellow-sprite-y);
  transition: transform 200ms linear;
}

    <div id="game-board">
    </div>

此代码中的确切问题是第 29 行，在本地文档中执行如下：

在 Github 上托管后执行此操作：

为什么它以这种方式工作，我可以做些什么来减少托管页面的性能下降？

令人惊讶的是，一切正常，CodePen 上不存在错误，但在 Github 上它仍然存在。

Answer 1

在收到一些关于我的网站对其他用户运行良好的反馈后，我在 CodePen 上分享了它并且它也运行良好，一天后有人说可能有一个扩展可以做类似的事情并且确实 Adblocker Ultimate导致性能下降。

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

Why does website cause most elements to be recalculated upon small change after being hosted?

javascript

hosting

performance

github-pages