6

前言

我刚开始使用 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 脚本在每个页面中加载更少的图像时，动画变得更快。单独的图像似乎比我预期的要产生更多的开销。

还有另一种方法可以做到这一点吗？

4

1 回答 1

1

JAVASCRIPT 解决方案

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

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

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

其次，requestAnimationFrame() 非常适合在画布元素上制作动画，但在 DOM 元素上的表现似乎有些不靠谱。在 Chrome 的分析器中打开您的页面以查看它挂断的确切位置。尝试使用 setTimeout() 来查看最终是否是这种情况。同样，分析器会告诉你挂断在哪里。requestAnimationFrame() 应该更好，但请验证这一点。以前，我已经适得其反了。

真正的解决方案

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

唯一的问题是 CSS3 动画仅由较新的浏览器支持。为了你自己的造就，这样做。对于真正的实际应用程序，委托给一个库。如果可能的话，一个好的库会在本地完成它，并回退到在 JS 中为旧浏览器执行它的最佳方式。

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

于 2013-03-20T03:49:13.077 回答