分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了为什么网站在托管后会导致大多数元素在发生微小变化时重新计算？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

开发过程中遇到为什么网站在托管后会导致大多数元素在发生微小变化时重新计算？的问题如何解决？下面主要结合日常开发的经验，给出你关于为什么网站在托管后会导致大多数元素在发生微小变化时重新计算？的解决方法建议，希望对你解决为什么网站在托管后会导致大多数元素在发生微小变化时重新计算？有所启发或帮助；

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

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

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;
}