使用JS和DOM对多个DIV元素进行动画处理会产生较低的帧率
前言
我刚开始用javascript编程，目前正在做我的这个爱好网站项目。该网站应该显示充满产品图片的页面，可以向左或向右“平移”。每个“页面”包含大约24张中等大小的图片，一页几乎占满了整个屏幕。当用户选择查看下一个页面时，他需要单击“n”向左拖动(例如)，让一个新页面(通过AJAX脚本动态加载)滑入视图。
问题所在
这需要我的javascript以屏幕的宽度同步“滑动”上面提到的两个页面。这导致了一个非常低的帧率。Firefox和Opera有一点滞后，Chrome的表现尤其糟糕:1帧动画大约需要1帧。100毫秒，因此使动画看起来非常“滞后”。
我不使用jQuery，也不想使用它或任何其他库来“替我做工作”。至少在我确定我正在尝试做的事情不能用几行自己编写的代码来完成之前，不是这样的。
到目前为止，我已经找出了我操作DOM的特定方式导致了性能下降。例程如下所示：
function slide() {
this.t = new Date().getTime() - this.msBase;
if( this.t > this.msDura ) {
this.callB.call(this.ref,this.nFrames);
return false;
}
//calculating the displacement of both elements
this.pxProg = this.tRatio * this.t;
this.eA.style.left = ( this.pxBaseA + this.pxProg ) + 'px';
this.eB.style.left = (this.pxBaseB + this.pxProg) + 'px';
if ( bRequestAnimationStatus )
requestAnimationFrame( slide.bind(this) );
else
window.setTimeout( slide.bind(this), 16 );
this.nFrames++;
}
//starting an animation
slide.call({
eA: theMiddlePage,
eB: neighboorPage,
callB: theCallback,
msBase: new Date().getTime(),
msDura: 400,
tRatio: ((0-pxScreenWidth)/400),
nFrames: 0,
ref: myObject,
pxBaseA: theMiddlePage.offsetLeft,
pxBaseB: neighboorPage.offsetLeft
});问题
我注意到，当我让AJAX脚本在每个页面中加载较少的图像时，动画会变得更快。单独的图像似乎产生了比我预期的更多的开销。
有没有其他方法可以做到这一点？
回答 1
Stack Overflow用户
发布于 2013-03-20 03:49:13
JAVASCRIPT解决方案
好的，有两种可能的事情可以让你尝试加快速度。
首先，当您修改元素的样式时，会强制浏览器重新呈现页面。这就是所谓的重绘。某些更改还会强制重新计算页面的几何形状。这称为回流。回流总是会在回流之后立即触发重绘。我认为，你在使用更多元素时性能较差的原因是，对每个元素的每次更新至少会触发一次重新绘制。在修改单个元素上的多个样式时，通常建议的做法是通过添加或删除一个类来一次性完成所有这些操作，或者隐藏元素，执行操作，然后显示它，这意味着只需要两次重绘(也可能是重排)。
在这个特殊的例子中，你可能已经做得很好了，因为你每次迭代只操作一次每个项目。
其次，requestAnimationFrame()很适合在画布元素上做动画，但在DOM元素上似乎有一些不可靠的性能。在Chrome的分析器中打开你的页面，看看它到底挂在哪里。试着只使用setTimeout()，看看结果是否如此。同样，分析器将告诉您挂起的位置。requestAnimationFrame()应该更好，但是要验证这一点。我以前也遇到过适得其反的情况。
真正的解决方案
如果可以避免的话，请不要在JavaScript中这样做。通过注册为每个动画元素的onTransitionEnd事件处理程序的JavaScript函数，使用CSS转换和转换来制作动画。让浏览器在本地做这些事情几乎总是比任何人都能编写的JS代码更快。
唯一的问题是CSS3动画只支持较新的浏览器。为了您自己的启迪，请这样做。对于实际的应用程序，委托给一个库。如果可能的话，一个好的库将原生地做这件事，并且在旧的浏览器上退回到用JS做这件事的最好方法。
关于这篇文章有很好的阅读链接：http://www.html5rocks.com/en/tutorials/speed/html5/
https://stackoverflow.com/questions/15283511
复制相似问题
腾讯云开发者
