提高背景視差滾動的性能

Question

你好StackOverflow社區，

我想要實現的是一個可以用鼠標移動的標題。 您可以輕觸標題並拖動鼠標，標題內的元素將以不同的速度移動。

我實現了parallaxing部分，但性能並不是很好。 拖動背景時有點滯后。

我現在的問題是：在代碼中可以改變什么才能獲得性能提升？

這是處理parallaxing的代碼的一部分。 在每個mousemove上執行每個循環，我認為這是性能如此滯后的原因：

var dragging = false;
var clickMouseX;

//Our object for the layers
//each layer has a different scrolling speed
var movingObjects = {
    '#header-l1' : {'speed': 1},
    '#header-l2' : {'speed': 1.4},
    '#header-l3' : {'speed': 1.85},
    '#header-l4' : {'speed': 2.2},
};

$('#header-wrapper').mousedown(function(e){
    dragging = true;

    //Get initial mouse position when clicked
    clickMouseX = e.pageX;

        $(this).mousemove(function(mme){
            //execute only if mousedown
            if(dragging){
                //iterate through all layers which have to be parallaxed
                $.each(movingObjects, function(el, opt){
                    var element = $(el);
                    //get difference of initial mouse position and current mouse position
                    var diff = clickMouseX - mme.pageX;
                    //scroll-position left speed 1
                    if(diff < 0) diff = -1;
                    //scroll position right speed 1
                    if(diff >= 0) diff = 1;
                    //get current position of layer
                    currLeft = parseInt(element.css('left'));
                    //get current layer width
                    elWidth = element.width();

                    //if right border is reached don't scroll further
                    if(currLeft < -(elWidth - 810)){
                        element.css('left', -(elWidth - 810));
                    }           
                    //so do with left border
                    if(currLeft > 0){
                        element.css('left', 0);
                    }
                    //parallax it! Subtract the scroll position speed multiplied by the speed of the desired
                    //layer from the current left property
                    element.css('left', parseInt(element.css('left')) - diff*opt.speed);    
                });
            }
        });


    /* Cursor */
    $(this).css('cursor', 'pointer');
    return false;
});

我也放了一個小提琴： http ： //jsfiddle.net/yWGDz/

托馬斯先謝謝你

PS也許有人甚至會發現為什么第二層和第三層具有相同的滾動速度，同時定義了不同的速度。

Answer 1

我在這方面工作了一下，想出了這個： http ： //jsfiddle.net/amqER/2/

這比原版快得多（特別是在firefox中，它表現得更好，Chrome它仍然很慢）。 我還改變了代碼中的一些邏輯，使其更有意義。

我做過的事情清單：

縮小你的朋友

你的2個png文件超過2兆，所以我把它們扔進了png壓縮器（ tinypng ），這大大減少了。 這有助於加載時間和整體快速。

盡可能重復使用值

在您的原始代碼中，您編寫了代碼，然后在css left屬性中讀取了幾次代碼。 這樣做會使速度慢很多。 相反，我保留了一個左側屬性，並且在我絕對需要時只會觸及$.css 。 同樣，每次更新時讀取每個元素的寬度。

另外，就像我說的那樣，我修改了你的邏輯（我認為）更有意義，考慮到你想要完成的事情。 它計算每個更新的新差異，並嘗試根據它移動。 此外，一旦其中一個圖像掉落，它就不會繼續移動（如果你一直向右移動，那么它就會繼續移動，看起來很奇怪）。 你也可以看看這個： http ： //jsfiddle.net/amqER/5/ ，這可能更像你想要的控制方案。

Answer 2

只是一些快速的性能提示。

盡量不要使用$(this).mousemove而是將$(this)保存到變量中並使用它。

var th = $(this);
th.mousemove...

盡量避免使用$ .each。 這可能是減慢代碼速度的部分。 你可以用for循環替換它，但我建議，在這種情況下，逐個發送每個元素。

var parallax = function(img){

};

parallax(img1);
parallax(img2);

瞬間增-您-jQuery的性能

Answer 3

雖然Xymostech的答案確實大大改善了原始海報的原始代碼; Chrome中的性能幾乎沒有提升。

在檢查頁面FPS的同時，這里發布的解決方案在Retina MacBook Pro上以15FPS運行。

我對代碼進行了非常簡單的更改，將其更改為使用translate3d屬性而不是left 。 現在，它的運行速度為55-60 FPS。 我稱這是一次巨大的性能提升。

如果在Chrome中打開“顯示繪制矩形”，您將看到之前發布的解決方案是在視差處於運動狀態時不斷地繪制對dom的更改。 使用translate3d解決方案，在視差運動的整個過程中完成零繪畫。

http://jsfiddle.net/LG47e/