javascript - 优化 javascript/coffeescript 中的视差滚动

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

我最终改用 Canvas 。这给人一种更顺畅的感觉。