使用JS和DOM动画化多个DIV元素会导致帧率较低

Question

前言

我刚开始用javascript编程,我目前正在研究我的这个业余爱好网站项目.该网站应该显示填充产品图像的页面,而不是"平移"到左侧或右侧.每个"页面"包含大约24个中等大小的图片,一页几乎完全填满整个屏幕.当用户选择查看下一页时,他需要单击"向左"(例如)以使新页面(通过AJAX脚本动态加载)滑入视图.

问题

这需要我的javascript按照屏幕的宽度同步"滑动"这些提到的两个页面.这导致非常低的帧速率.Firefox和Opera有点滞后,Chrome让它特别糟糕: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脚本在每个页面中加载较少的图像时,动画变得更快.单独的图像似乎产生了比我预期更多的开销.

还有另一种方法吗？

Answer 1

JavaScript 解决方案

好的，有两种可能的方法可以让您尝试加快速度。

首先，当您修改元素的样式时，您会强制浏览器重新呈现页面。这称为重绘。某些更改还会强制重新计算页面的几何形状。这称为回流焊。回流总是会在其之后立即触发重绘。我认为为什么元素越多，性能越差，因为每个元素的每次更新都至少会触发一次重新绘制。在修改单个元素上的多个样式的情况下，通常建议的做法是通过添加或删除类来一次性完成所有这些操作，或者隐藏该元素，进行操作，然后显示它，这意味着只需两次重绘（并可能回流）。

看来在这种特殊情况下，您可能已经做得很好了，因为每次迭代您只操作每个项目一次。

其次，requestAnimationFrame() 非常适合在 canvas 元素上执行动画，但在 DOM 元素上似乎表现不佳。在 Chrome 的分析器中打开您的页面，查看它挂起的确切位置。尝试使用 setTimeout() 看看结果是否如此。同样，分析器会告诉您问题出在哪里。requestAnimationFrame() 应该更好，但要验证这一点。我以前也曾遭遇过事与愿违的情况。

真正的解决方案

如果可以避免的话，请不要在 JavaScript 中这样做。使用 CSS 转换和转换，通过注册为每个动画元素的 onTransitionEnd 事件处理程序的 JavaScript 函数来执行动画。让浏览器本地执行这些操作几乎总是比任何人可以编写的任何 JS 代码都要快。

唯一的问题是 CSS3 动画仅受较新的浏览器支持。为了你自己的启发，就这样做吧。对于真正的、实际的应用程序，请委托给图书馆。如果可能的话，一个好的库会在本地执行此操作，并回退到在 JS 中为旧版浏览器执行此操作的最佳方式。

阅读有关此内容的良好链接：http://www.html5rocks.com/en/tutorials/speed/html5/