优化javascript/coffeescript中的视差滚动

我们在我们的网站上有视差滚动。
它很简单，每边有4层，根据线性函数以不同的速度滚动。优化javascript/coffeescript中的视差滚动

但是，它不是一个光滑的，因为我想它是，特别是当我有多个标签打开。
您注意到在滚动和视差图像更新之间略有延迟以及帧率下降。

的帧率是一个小屏幕（我正在开发一个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可能有帮助？

来源

2012-03-08 Nicklas A.

当你保存变量'el'然后'top'时，你会对'parallaxLayers [layer]'进行两次调用，我不认为这会产生多大的影响，但可能存储的数量可能会有所帮助。我怀疑现在会有什么不同，因此留下评论。 – 2012-03-08 09:30:33

这不是JavaScript ... – nnnnnn 2012-03-08 09:41:30

我已经更改为只从对象获取一次，并不确定我能否注意到其中的差异，但是非常感谢！ – 2012-03-08 09:51:20

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

来源

2012-03-08 19:14:56

优化javascript/coffeescript中的视差滚动

回答

相关问题