Javascript和性能

Question

我在這裏遇到一個奇怪的問題。我有一個Javascript代碼，可以對角滾動我的頁面。它採用scrollTop（）值並將其分爲對角滾動。但是當我嘗試使用兩個「圖層」滾動它時，前景滾動比背景圖層更多，當我完成滾動到底部並嘗試再次滾動到頂部時，我會遇到一個遲緩的動畫。

我嘗試了一些東西，就像我在這裏看到的，像緩存變量，在例如$（窗口）作爲$窗口沒有運氣。我不知道這個問題是由Math還是Animate發生的。

這裏是我的jsfiddle：http://jsfiddle.net/sPB3a/

你可以體驗到它在全屏瀏覽：http://jsfiddle.net/sPB3a/show/

感謝您的任何提示！

Answer 1

我認爲問題的根本原因是背景圖像的大小。我從你的頁面中刪除了所有的背景圖片，並且我得到了一個非常平滑的滾動。

它們真的很重。你應該嘗試使用非常低質量的jpg圖像（少於20k）。如果這樣做，那麼你就可以在圖像上找到妥協。

注：png格式是一種無圖像格式。它適用於小圖像和截圖（大面積顏色完全相同）。當有很多非常相似的顏色，模糊和漸變時，這並不好。例如相片。在你的情況下，你應該使用JPG格式和質量水平。

Answer 2

您正在查詢您的$(window).scroll函數中的dom。我不認爲這是一個好的做法。

緩存你的變量，通過JavaScript訪問dom非常緩慢。

我有很多東西在你的代碼中，請檢查它是否可以幫助你。

Fiddle

$(function(){ 


    var $window = $(window); 
    var windowHeight = $window.height(); 
    var windowWidth = $window.width(); 
    var content = $("#content"); 
    var section = content.children("section"); 
    var sectionsNumbers = section.length-1; 
    var illusion = $(".illusion1"); 
    var mask = $('#mask'); 
    // Scroll sets 

    var windowScrollX = ((sectionsNumbers+1)*windowWidth)-windowWidth; 
    var windowScrollY = ((sectionsNumbers+1)*windowHeight)-windowHeight; 

    content.css({"width":windowScrollX+windowWidth,"height":windowScrollY+windowHeight}); 

    illusion .css({"width":windowScrollX+windowWidth,"height":windowScrollY+windowHeight}); 


    // Set mask w and h 

    mask.css({"width":windowWidth,"height":windowHeight}); 
    $(".scrollRule").css("height", (sectionsNumbers+1)*windowHeight); 


    section.each(function(sectionCount,val) { 

     // Defines its width and height 
     var $this = $(this); 
     $this.css({"width":windowWidth,"height":windowHeight,"left":sectionCount*windowWidth,"top":sectionCount*windowHeight}); 


    }); 

    // When window scrolls 


    var angleVar = windowScrollX/windowScrollY; 
    var curScrollTop; 
    $(window).scroll(function(){ 
     var $this = $(this); 
     curScrollTop = $this.scrollTop(); 
     content.stop().animate({left: "-"+curScrollTop*angleVar, top: "-"+curScrollTop}, {duration: 1250, easing: 'easeOutQuart'}); 
     illusion.stop().animate({left: "-"+curScrollTop*angleVar*0.5, top: "-"+curScrollTop*0.5}, {duration: 1250, easing: 'easeOutQuart'});   
    }); 

});