我的jQuery运行有点慢.我该如何加快速度

My jQuery is running a bit slow. How do I speed it up?

本文关键字:何加快 速度 jQuery 运行 我的      更新时间:2023-10-28

我能做些什么来加快速度吗?或者你有没有注意到新手犯的错误?

我注意到我重复了很多变量。这就是为什么我不必写出每一行,但我不确定是否有更好的解决方案?

这个问题通常发生在不戴标签后切换回标签时。点击外环需要几秒钟才能做出响应,但之后就没事了。就像有剩余的代码在运行一样,它需要重写吗?我不确定,但我希望有经验的用户能够仔细阅读我的代码,看看可以改进什么。

这是一个正在工作的jsFiddlehttp://jsfiddle.net/eA6x6/1/,下面是我的全部javascript代码。

jQuery(document).ready(function() {
var timeoutHandle;
// hide stuff
    var hideServices = function() {
            jQuery(".services-inner").css({"opacity": "0"});
            jQuery(".insignia-inner").css({"opacity": "0"});
            jQuery(".insignia-inner-text").css({"opacity": "0"});
    };
    var hideAll = function() {
            jQuery(".military-kit-inner").css({"opacity": "0"});
            jQuery(".property-inner").css({"opacity": "0"});
            jQuery(".home-contents-inner").css({"opacity": "0"});
            jQuery(".travel-inner").css({"opacity": "0"});
            jQuery(".events-inner").css({"opacity": "0"});
            jQuery(".adventurous-training-inner").css({"opacity": "0"});
            jQuery(".personal-injury-inner").css({"opacity": "0"});
            jQuery(".challenge-pursuits-inner").css({"opacity": "0"});
            jQuery(".sports-and-tours-inner").css({"opacity": "0"});
            jQuery(".winter-sports-inner").css({"opacity": "0"});
            jQuery(".now-available").css({"opacity": "0"});
            jQuery(".now-available-background").css({"opacity": "0"});
            jQuery(".launched-shortly").css({"opacity": "0"});
            jQuery(".launched-shortly-background").css({"opacity": "0"});
    };
    var showServicesDelay = function() {
            timeoutHandle = setTimeout(function () {
                    jQuery(".services-inner").css({"opacity": "0.5"});
                jQuery(".insignia-inner").css({"opacity": "1"});
                jQuery(".insignia-inner-text").css({"opacity": "1"});
                hideAll();
        }, 5000);       
    };
// show messages
    var showLaunchedShortly = function() {
            jQuery(".launched-shortly").css({"opacity": "1"});
            jQuery(".launched-shortly-background").css({"opacity": "1"});
    };
    var showNowAvailable = function() {
            jQuery(".now-available").css({"opacity": "1"});
            jQuery(".now-available-background").css({"opacity": "1"});
    };
// show services
    var showMilitaryKit = function() {
            jQuery(".military-kit-inner").css({"opacity": "1"});
            clearTimeout(timeoutHandle);
    };
    var showProperty = function() {
            jQuery(".property-inner").css({"opacity": "1"});
            clearTimeout(timeoutHandle);    
    };
    var showHomeContents = function() {
            jQuery(".home-contents-inner").css({"opacity": "1"});
            clearTimeout(timeoutHandle);
    };
    var showTravel = function() {
            jQuery(".travel-inner").css({"opacity": "1"});
            clearTimeout(timeoutHandle);
    };
    var showEvents = function() {
            jQuery(".events-inner").css({"opacity": "1"});
            clearTimeout(timeoutHandle);
    };
    var showAdventurousTraining = function() {
            jQuery(".adventurous-training-inner").css({"opacity": "1"});
            clearTimeout(timeoutHandle);
    };
    var showPersonalInjury = function() {
            jQuery(".personal-injury-inner").css({"opacity": "1"});
            clearTimeout(timeoutHandle);
    };
    var showChallengePursuits = function() {
            jQuery(".challenge-pursuits-inner").css({"opacity": "1"});
            clearTimeout(timeoutHandle);
    };
    var showSportsAndTours = function() {
            jQuery(".sports-and-tours-inner").css({"opacity": "1"});
            clearTimeout(timeoutHandle);
    };
    var showWinterSports = function() {
            jQuery(".winter-sports-inner").css({"opacity": "1"});
            clearTimeout(timeoutHandle);
    };


// military kit
    jQuery(".military-kit-hover").click(function() {        
        hideAll();
        hideServices();
        showMilitaryKit();
        showServicesDelay();
        showNowAvailable();
    });
// property
    jQuery(".property-hover").click(function() {
        hideAll();
        hideServices();
        showProperty();
        showServicesDelay();
        showNowAvailable();
    }); 
// home contents
    jQuery(".home-contents-hover").click(function() {
        hideAll();
        hideServices();
        showHomeContents();
        showServicesDelay();
        showNowAvailable();
    }); 
// travel
    jQuery(".travel-hover").click(function() {
        hideAll();
        hideServices();
        showTravel();
        showServicesDelay();
        showNowAvailable();
    }); 
// events
    jQuery(".events-hover").click(function() {
        hideAll();
        hideServices();
        showEvents();
        showServicesDelay();
        showLaunchedShortly();
    }); 
// adventurous training
    jQuery(".adventurous-training-hover").click(function() {
        hideAll();
        hideServices();
        showAdventurousTraining();
        showServicesDelay();
        showLaunchedShortly();
    }); 
// personal injury
    jQuery(".personal-injury-hover").click(function() {
        hideAll();
        hideServices();
        showPersonalInjury();
        showServicesDelay();
        showNowAvailable();
    }); 
// challenge pursuits
    jQuery(".challenge-pursuits-hover").click(function() {
        hideAll();
        hideServices();
        showChallengePursuits();
        showServicesDelay();
        showNowAvailable();
    }); 
// sports and tours
    jQuery(".sports-and-tours-hover").click(function() {
        hideAll();
        hideServices();
        showSportsAndTours();
        showServicesDelay();
        showLaunchedShortly();
    }); 
// winter sports
    jQuery(".winter-sports-hover").click(function() {
        hideAll();
        hideServices();
        showWinterSports();
        showServicesDelay();
        showLaunchedShortly();
    }); 
});

加速jQuery的一种方法是缓存DOM元素,以减少多次选择同一元素的次数,这涉及到每次都要在DOM中搜索该元素-这可能很慢,资源也很重,具体取决于DOM的大小或复杂程度。

基于代码的示例:

var insigniaInner = jQuery('.insignia-inner'); //cache the div to a variable
...
//use the variable in your code instead of jQuery('.insignia-inner');
insigniaInner.css({"opacity":0});

如果使用大量选择器,您应该会看到速度显著提高。

编辑:另一种加速代码的方法是给所有想要隐藏的元素一个公共类,所以你只需要做一些类似的事情:

jQuery('.hide').hide();

这也将减少选择器调用。另一种方法是以父元素为目标,淡化或隐藏它,而不是单独的元素。

我猜图形停顿是由于您同时"隐藏所有"然后"显示一个"(动画通常是异步的)。我不认为代码运行缓慢,这是一个图形冲突。在hideAll方法和hideServices方法中添加一个参数"exceptThisOne",并使它们成为case语句。如何处理冲突取决于你自己。

你可以做很多事情,但一个好的开始是确保你在生产中使用自定义的.min版本的jquery。另一种是将其中一些结合起来,例如:

jQuery(".services-inner").css({"opacity": "0"});
jQuery(".insignia-inner").css({"opacity": "0"});

成为

jQuery(".insignia-inner, .services-inner").css({"opacity": "0"});

Jquery docs:Multiple Selector("选择器1、选择器2、选择器N")http://api.jquery.com/multiple-selector/

对于初学者来说,只要jQuery不与任何其他库冲突,就可以用($)替换jQuery,从而节省一点下载时间。

但是,您也可以通过替换来同时分配所有内容:

 var hideAll = function() {
            jQuery(".military-kit-inner").css({"opacity": "0"});
            jQuery(".property-inner").css({"opacity": "0"});
            jQuery(".home-contents-inner").css({"opacity": "0"});
            jQuery(".travel-inner").css({"opacity": "0"});
            jQuery(".events-inner").css({"opacity": "0"});
            jQuery(".adventurous-training-inner").css({"opacity": "0"});
            jQuery(".personal-injury-inner").css({"opacity": "0"});
            jQuery(".challenge-pursuits-inner").css({"opacity": "0"});
            jQuery(".sports-and-tours-inner").css({"opacity": "0"});
            jQuery(".winter-sports-inner").css({"opacity": "0"});
            jQuery(".now-available").css({"opacity": "0"});
            jQuery(".now-available-background").css({"opacity": "0"});
            jQuery(".launched-shortly").css({"opacity": "0"});
            jQuery(".launched-shortly-background").css({"opacity": "0"});
    };

比如:

 var hideAll = function() {
           $('[class $="-inner"]').css({"opacity": "0"});
           $(':not[class $="-inner"]').css({"opacity": "0"});
           //or, replace the line above with
           $('[class ^="now-available"]').css({"opacity": "0"});
           $('[class ^="launched-shortly"]').css({"opacity": "0"});
    };

这只是一个例子,但逻辑可能不是你想要的(基本上,在这个例子中,所有有一个类的东西的不透明度都为0)。