Les scripts jQuery s'exécutent très lentement

Question

J'ai un gros problème. J'ai créé un site en utilisant jQuery, mais il fonctionne très lentement. Sur les téléphones mobiles, c'est terrible! Et je ne sais pas, qu'est-ce qui ne va pas ... Quelqu'un peut m'aider? Liens ne fonctionne pas encore, car je veux utiliser CMS sur cette mise en page, mais avant que je ne veux pas optimiser ces scripts.

site de test est ici: http://wm.pawelgorastudio.pl

Et voici les scripts:

<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

avec iphone 3g/s vous devez considérer qu'ils puissance, il est vraiment comparer lent à de nouveaux modèles et si vous avoir le temps this article il a quelques points solides sur le sujet, et javascript est interprété plus lentement ..

même si le site est "petit" seulement 64 request et 252kb de transfert et encore mal sur les mobiles donc la seule chose que je pense à elle est de compresser les fichiers en mettant tous ensemble, réduire les images soit en utilisant du texte avec css ou sprites. donc la demande est plus petite aussi ce n'est pas important pour la vitesse de performance sage mais il est vraiment bon de gérer les événements pour les appareils mobiles, essayez d'éviter click si vous connaissez l'appareil c'est un mobile ou il a des capacités tactiles. vous pouvez utiliser jQuery mobile ou JQT pour gérer ces événements tels que tap ou double tap.

aussi d'éviter d'utiliser plusieurs:

$(document).ready(function() { 

}); 

et

$(document).load(function() { 

}); 

vous pouvez vérifier this answer pour référence.