使用JavaScript访问CSS样式太慢
我正在用JavaScript创建一个简单的重力物理游戏。我刚一开始就意识到我可能做错了什么,因为速度非常慢 我使用圆形html div元素作为行星,使用一个小div元素作为球(这是一个迷你高尔夫游戏)。我的代码如下所示:使用JavaScript访问CSS样式太慢,javascript,css,performance,render,Javascript,Css,Performance,Render,我正在用JavaScript创建一个简单的重力物理游戏。我刚一开始就意识到我可能做错了什么,因为速度非常慢 我使用圆形html div元素作为行星,使用一个小div元素作为球(这是一个迷你高尔夫游戏)。我的代码如下所示: function Ball([x, y, r]) { this.b = document.createElement("DIV"); this.b.className = "ball"; this.b.style.width = r * 2 + "p
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,我真的很想知道它 使用requestAnimationFrame而不是setTimeout将获得更好的性能。
顺便说一句,最好使用画布来运行游戏,速度非常快。您可以查看PIXI.js或EaselJS。除了使用动画帧外,设置
b.b.style.left
和b.b.style.top的两行代码也会导致此问题,因为您从DOM中读取内容,然后写入,然后从DOM中读取内容,然后再次写入。你应该把你的读写结合在一起(见链接)。考虑使用<代码>转换:翻译(x,y)< /c> > <代码>顶部/左边< /代码>将触发DOM布局,这是非常昂贵的:)非常感谢!我发现它非常好而且简洁。