優化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中的視差滾動

回答

相關問題