用 JavaScript 访问 CSS 样式太慢了答案

【问题标题】：Accessing CSS styles with JavaScript is too slow用 JavaScript 访问 CSS 样式太慢了
【发布时间】：2019-06-18 02:30:56
【问题描述】：

我正在使用 JavaScript 创建一个简单的重力物理游戏。当我意识到我可能做错了什么时，我几乎没有开始，因为它运行得非常慢。

我使用圆形 html div 元素作为行星，并使用一个小的 div 元素作为球（这是一个迷你高尔夫游戏）。我的代码如下所示：

  function Ball([x, y, r]) {
    this.b = document.createElement("DIV");
    this.b.className = "ball";
    this.b.style.width = r * 2 + "px";
    this.b.style.height = r * 2 + "px";
    this.b.style.left = x + "px";
    this.b.style.top = y + "px";
    this.start = [x, y];
    this.v = [0, 0];
    this.planets = levels.list[levels.currLevel][1];
    // the above line just has the information for each planet
    document.body.appendChild(this.b);
  }
  Ball.prototype.physics = function () {
    var b = this;
    var a = [0.25, -0.09];
    this.planets.forEach(function (info) {
      // change acceleration from each planet
    });
    b.v[0] += a[0];
    b.v[1] += a[1];
    b.b.style.left = (parseFloat(b.b.style.left) + b.v[0]) + "px";
    b.b.style.top = (parseFloat(b.b.style.top) + b.v[1]) + "px";
    setTimeout(function () {b.physics();}, 30);
  }

主要问题似乎是我每秒使用 JavaScript 访问 CSS 属性 33 次。

我是一个相当新的程序员，所以如果有一种完全替代的方式来制作形状并在不处理 DOM 元素和 CSS 的情况下移动它们，我真的很想知道它！

【问题讨论】：

除了使用动画帧之外，您设置b.b.style.left 和b.b.style.top 的两行将导致layout thrashing，因为您是从DOM 读取然后写入它，然后从DOM 读取DOM 并再次写入。您应该将读取和写入批处理（请参阅链接）。
考虑使用transform: translate(x,y) 作为top/left 会触发DOM 布局，非常昂贵:)

标签： javascript css performance render

【解决方案1】：

使用 requestAnimationFrame 代替 setTimeout 会获得更好的性能。顺便说一句，最好使用画布来运行你的游戏，它超级快。你可以看看 PIXI.js 或 EaselJS。

【讨论】：

非常感谢！我找到了this article，它非常好和简洁。