jQuery腳本運行速度很慢

Question

我有一個很大的問題。我使用jQuery創建了網站，但運行速度非常緩慢。在手機上，這太可怕了！我不知道，有什麼不對...有人可以幫助我嗎？

鏈接還沒有工作，因爲我想在這個佈局上使用CMS，但是在我想稍微優化這些腳本之前。

這裏的測試場地： http://wm.pawelgorastudio.pl

而且這裏的腳本：

<script type="text/javascript" src="js/css3-mediaqueries.js"></script> 
<script type="text/javascript" src="js/picturefill.js"></script> 
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> 
<script type="text/javascript" src="js/jquery.color.plus-names-2.1.1.min.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script> 

<!-- Magnific Popup core JS file --> 
<script src="js/jquery.magnific-popup.min.js"></script> 

<!-- jQuery carouFredSel JS file --> 
<script src="js/jquery.carouFredSel-6.2.1-packed.js"></script> 

<!--Adobe TypeKit fonts - https://typekit.com--> 
<script type="text/javascript" src="//use.typekit.net/eiz5mrm.js"></script> 
<script type="text/javascript">try{Typekit.load();}catch(e){}</script> 

<!-- Preloader --> 
<script type='text/javascript'> 
    $(window).load(function() { 
     $(".preloader").delay(100).fadeOut(1000); 
    }) 
</script> 

<!-- Image viewer --> 
<script type='text/javascript'> 
    $(document).ready(function() { 
     $('.image-link').magnificPopup({type:'image'}); 
    }); 
</script> 

<!-- All div links engine for Internet Explorer --> 
<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".mainmenu1 a, .mainmenu2 a, .rowclients a").click(function(event) { 
      event.preventDefault(); window.location = $(this).attr("href"); 
     }); 
    }); 
</script> 

<!-- Top menu links hover animation --> 
<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".topmenu2 .topContact a").hover(
      function() { 
       $(this).stop().animate({"color": "#B2B2B2"}, 250); 
      }, 
      function() { 
       $(this).stop().animate({"color": "#666666"}, 250); 
      } 
     ); 
    }); 
</script> 

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".topmenu2 #ENDesk a, .topmenu2 #ENMobile a").hover(
      function() { 
       $(this).stop().animate({"color": "#FF6400"}, 250); 
      }, 
      function() { 
       $(this).stop().animate({"color": "#CCCCCC"}, 250); 
      } 
     ); 
    }); 
</script> 

<!-- Main menu links animation --> 
<script type='text/javascript'> 
    $(document).ready(function anime(){ 
     setInterval(function(){ 
      $(".A1b").delay(0).animate({"opacity": "1"}, 500, "swing"); 
      $(".A1b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A3b").delay(250).animate({"opacity": "1"}, 500, "swing"); 
      $(".A3b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A4b").delay(500).animate({"opacity": "1"}, 500, "swing"); 
      $(".A4b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A6b").delay(750).animate({"opacity": "1"}, 500, "swing"); 
      $(".A6b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A8b").delay(1000).animate({"opacity": "1"}, 500, "swing"); 
      $(".A8b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A9b").delay(1250).animate({"opacity": "1"}, 500, "swing"); 
      $(".A9b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".anime-2img").delay(1500).animate({left: "195px", top: "100px"}, 700, "swing"); 
      $(".anime-5img").delay(1500).animate({left: "181px", top: "97px"}, 700, "swing"); 
      $(".anime-7img").delay(1500).animate({left: "1px", top: "7px"}, 700, "swing"); 
      $(".anime-3img").delay(1600).animate({left: "80px"}, 500, "swing"); 
      $(".anime-3txt").delay(1600).animate({left: "80px"}, 500, "swing"); 
      $(".anime-4img").delay(1600).animate({top: "30px"}, 500, "swing"); 
      $(".anime-4txt").delay(1600).animate({top: "30px"}, 500, "swing"); 
      $(".A1b").delay(3000).animate({"opacity": "1"}, 500, "swing"); 
      $(".A1b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A3b").delay(3250).animate({"opacity": "1"}, 500, "swing"); 
      $(".A3b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A4b").delay(3500).animate({"opacity": "1"}, 500, "swing"); 
      $(".A4b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A6b").delay(3750).animate({"opacity": "1"}, 500, "swing"); 
      $(".A6b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A8b").delay(4000).animate({"opacity": "1"}, 500, "swing"); 
      $(".A8b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".A9b").delay(4250).animate({"opacity": "1"}, 500, "swing"); 
      $(".A9b").animate({"opacity": "0"}, 1000, "swing"); 
      $(".anime-2img").delay(4500).animate({left: "51px", top: "12px"}, 700, "swing"); 
      $(".anime-5img").delay(4500).animate({left: "1px", top: "7px"}, 700, "swing"); 
      $(".anime-7img").delay(4500).animate({left: "181px", top: "97px"}, 700, "swing"); 
      $(".anime-3img").delay(4600).animate({left: "100px"}, 500, "swing"); 
      $(".anime-3txt").delay(4600).animate({left: "100px"}, 500, "swing"); 
      $(".anime-4img").delay(4600).animate({top: "43px"}, 500, "swing"); 
      $(".anime-4txt").delay(4600).animate({top: "43px"}, 500, "swing"); 
     }, 10000); 
    }); 
</script> 

<!-- Social links hover animation and links engine for Internet Explorer --> 
<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".B1a").hover(
      function() { 
       $(this).stop().animate({"opacity": "0"}, 500); 
      }, 
      function() { 
       $(this).stop().animate({"opacity": "1"}, 500); 
      } 

     ); 
     $(".fadehover a").click(function(event) { 
      event.preventDefault(); window.open($(this).attr("href")); 
     }); 
    }); 
</script> 

<!-- Submenu links hover animation and engine for mobile menu --> 
<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".submenu#MobileMenu").fadeOut(0); 
    }); 
</script> 

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $("#EnterMenu").hover(
      function() { 
       $(".submenu#Mobile p").stop().animate({"color": "#FFFFFF"}, 250); 
       $(".M1a").stop().animate({"opacity": "0"}, 250); 
      }, 
      function() { 
       $(".submenu#Mobile p").stop().animate({"color": "#333333"}, 250); 
       $(".M1a").stop().animate({"opacity": "1"}, 250); 
      } 
     ); 
     $("#EnterMenu").click(function(event) { 
      event.preventDefault(); 
      $(".submenu#MobileMenu").fadeIn(250); 
      $('.submenu#MobileMenu .submenuList a').each(function(i) { 
       var margins = 25 - ($(this).height()/2) + "px"; 
       $(this).css({"margin-top": margins, "margin-bottom": margins}); 
      }); 
     }); 
    }); 
</script> 

<script type='text/javascript'> 
    $(window).load(function() { 
     $('.submenu#DeskMenu .submenuList').each(function(i) { 
      var margins = 25 - ($(this).height()/2) + "px"; 
      $(this).css({"margin-top": margins, "margin-bottom": margins}); 
     }); 
    }); 
    $(window).resize(function() { 
     $('.submenu#DeskMenu .submenuList, .submenu#MobileMenu .submenuList a').each(function(i) { 
      var margins = 25 - ($(this).height()/2) + "px"; 
      $(this).css({"margin-top": margins, "margin-bottom": margins}); 
     }); 
    }); 
</script> 

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".submenu a").hover(
      function() { 
       $(this).stop().animate({"color": "#FFFFFF"}, 250); 
      }, 
      function() { 
       $(this).stop().animate({"color": "#333333"}, 250); 
      } 
     ); 
    }); 
</script> 

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".submenuList p").hover(
      function() { 
       $(this).stop().animate({"color": "#FFFFFF"}, 250); 
      }, 
      function() { 
       $(this).stop().animate({"color": "#333333"}, 250); 
      } 
     ); 
    }); 
</script> 

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $("#CloseMenu").hover(
      function() { 
       $("#Close p").stop().animate({"color": "#FFFFFF"}, 250); 
       $(".C1a").stop().animate({"opacity": "0"}, 250); 
      }, 
      function() { 
       $("#Close p").stop().animate({"color": "#333333"}, 250); 
       $(".C1a").stop().animate({"opacity": "1"}, 250); 
      } 
     ); 
     $("#CloseMenu").click(function(event) { 
      event.preventDefault(); 
      $(".submenu#MobileMenu").fadeOut(250); 
     }); 
    }); 
</script> 

<!-- Clients list animation --> 
<script type='text/javascript'> 
    $(window).load(function() { 
     $('.clientsImg').each(function(i) { 
      var clients = $('.clientsImg'); 
      var index = clients.index(this); 
      var next = clients[index+1]; 
      var prev = clients[index-1]; 
      $(this).css("top", 27 - ($(this).height()/2) + "px"); 
      if (i == 0) { 
       $(this).css("left", 0); 
      } 
      else { 
       $(this).css("left", $(prev).width() + $(prev).position().left + 40 + "px"); 
      } 
      window.TotalWidth = 0; 
      $('.clientsList').find('.clientsImg').each(function() { 
       window.TotalWidth += $(this).width() + 40; 
      }); 
      $('.clientsList').width(TotalWidth); 
     }); 
     (function fly() { 
      $('.clientsImg').animate({left: "-=1px"}, 10, "linear", function() { 
       if ($(this).position().left <= 0 - $(this).width()) { 
        $(this).css("left", "+=" + TotalWidth + "px"); 
       } 
       fly(); 
      }); 
     }()); 
    }); 
</script> 

<!-- Footer list hover animation --> 
<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".rowfooter a").hover(
      function() { 
       $(this).stop().animate({"color": "#4C4C4C"}, 250); 
      }, 
      function() { 
       $(this).stop().animate({"color": "#999999"}, 250); 
      } 
     ); 
    }); 
</script> 

<!-- Cookies Info box animation engine for display it and set and read cookies engine --> 
<script type='text/javascript'> 
    $(window).load(function() { 
     var cookieHeight = "-" + $(".cookiesInfo").height() + "px"; 
     $(".cookiesInfo").css({opacity: 0, bottom: cookieHeight}); 
     if ($.cookie("cookieBox") != 1) { 
      var cookieHeight = "-" + $(".cookiesInfo").height() + "px"; 
      $(".cookiesInfo").delay(1100).animate({opacity: 1, bottom: 0}, 1000, "swing"); 
     } 
    }) 
</script> 

<script type='text/javascript'> 
    $(document).ready(function(){ 
     $(".C2a").hover(
      function() { 
       $(this).stop().animate({"opacity": "0"}, 500); 
      }, 
      function() { 
       $(this).stop().animate({"opacity": "1"}, 500); 
      } 
     ); 
     $(".closecookiesInfo a").click(function(event) { 
      event.preventDefault(); 
      $.cookie("cookieBox", 1); 
      var cookieHeight = "-" + $(".cookiesInfo").height() + "px"; 
      $(".cookiesInfo").animate({opacity: 0, bottom: cookieHeight}, 1000, "swing"); 
     }); 
    }); 
</script> 

Answer 1

與iPhone 3G /是你必須考慮到它們供電的它實在是太慢了比較新的車型，如果你有時間this article它有一些關於這個話題的實際觀點，並且JavaScript的解釋更慢..

即使這個網站它是「小」只64 request和252kb的轉移，仍然表現不佳的手機，所以我認爲唯一的辦法是壓縮文件放在一起，通過使用CSS文本或sprites減少圖像。所以請求也較小，這對於快速性能並不重要，但對於處理移動設備的事件真的很好，嘗試避免使用click，如果您知道該設備是移動設備還是具有觸摸功能。您可以使用jQuery mobile或JQT來處理此類事件，例如tap或double tap。

而且避免使用多個：

$(document).ready(function() { 

}); 

和

$(document).load(function() { 

}); 

您可以檢查this answer參考。