Question

我们的网站上有视差滚动。
它很简单，每侧有4层，根据线性函数以不同的速度滚动。

但是，它并不像我想要的那样顺畅，特别是当我打开多个标签时您会注意到滚动和更新视差图像之间存在轻微延迟以及帧速率降低。

在小屏幕上帧率更好（我在27英寸屏幕上开发）但我希望在所有屏幕上获得最佳性能。

以下是设置滚动的代码：

win = $(window)
footerHeight = $('footer').height()
win.scroll ->
  scroll = win.scrollTop()
  baseTop = 183 - scroll - 6*scroll/footerHeight
  for layer in [0..7]
    el = parallaxLayers[layer].element
    top = parseInt(baseTop - scroll * (10 + layer % 4 * 30)/footerHeight)
    left = parallaxLayers[layer].left
    el.style.backgroundPosition = "#{left}px #{top}px"

这是CoffeeScript，但我希望对大多数JS开发人员来说这很简单。

我已经做过的事情：

预取所有元素，以便可以在函数中立即访问它们。
预取background-position-x，这样就不需要每次迭代都获取它。
由于开销增加，不要使用jQuery来设置样式。
尽可能少地计算所有内容（因此baseTop）

每个图层都是静态定位的，因此它们不会抖动，我确保修改背景位置，这样我就不会重新翻页。

我还有什么可以尝试的吗？

由于性能与屏幕尺寸一致，我认为这是一个渲染问题而不是JS问题。也许一些奇特的CSS3可能会有所帮助？

Answer 1

我最终使用了画布。这给人一种更平滑的感觉。

优化javascript / coffeescript中的视差滚动

1 个答案: