javascript-性能-重绘新画布或更改其CSS位置？

我开始尝试用Javascript开发游戏,在进一步探讨该主题之前,我只遇到一个问题.

在每帧绘制一个新画布还是仅更改CSS的left,right,top和bottom属性是否更有效率(从性能角度而言)？

一个游戏中的乒乓球示例：

该代码每秒将被调用60次以上,假设我们不仅拥有一个球,而且拥有更多的玩家,可能参与的游戏更加复杂,环境中的实体也需要更新,等等.

//Draws a NEW square in a NEW location that has been
//prevIoUsly updated by a game method
canvasContext.fillRect(posX, posY, ballW, ballH);

要么

//ball is an stand alone canvas

//Updates the position
ball.style.left = prevIoUsPos + 1;

解决方法:

最好的方法是自己在一个画布上全部渲染,或者使用多个球并修改其transform CSS property.

使用转换比使用顶部和左侧更快.你可以这样做：

function updatePos() {
  var e = document.getElementsByClassName('ellipse');
  for (var i = 0; i < e.length; i++) {
    e[i].dataset.x = (parseFloat(e[i].dataset.x) || 0) + Math.random() * 10 - 5;
    e[i].dataset.y = (parseFloat(e[i].dataset.y) || 0) + Math.random() * 10 - 5;
    e[i].style.transform = 'translate(' + e[i].dataset.x + 'px, ' + e[i].dataset.y + 'px)';
  }
  requestAnimationFrame(updatePos);
}
updatePos();

.ellipse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #f00;
  border-radius: 50%;
  border: 1px solid;
}

<div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div><div class="ellipse"></div>

本质上,您只需要固定顶部和左侧位置并修改变换即可.