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 / s时你必须考虑到它们的功能与新型号相比真的很慢，如果你有时间this article它有一些关于这个主题的固定点，并且javascript被解释得更慢.. < / p>

即使是网站，它也是＆＃34;小＆＃34;只有64 request和252kb的转移，但仍然在移动设备上表现不佳，所以我唯一想到的就是压缩文件将所有内容放在一起，通过使用带有css的文本或{{3}来减少图像}。因此请求较小也对性能速度不重要，但处理移动设备事件非常好，如果您知道设备是移动设备或具有触摸功能，请尽量避免使用click。您可以使用sprites或jQuery mobile来处理此类事件，例如tap或double tap。

同时避免使用多个：

$(document).ready(function() {

});

和

$(document).load(function() {

});

您可以查看JQT以供参考。