提高此jquery脚本的性能 [英] Improve performance of this jquery script

问题描述

与其他计算机相比，该计算机运行速度快.但是我不知道在速度较慢的计算机上会有多快. 该代码动态地过滤结果.条件是在CSS类中设置的..

This runs fast compared to other's.But i dont know how fast it would be at slow computers.. The code filters the results dymanically. The criteria are set in css class..

$(document).ready(function ()
{


    $("#filters a").click(function(event)
    {
        event.preventDefault();
        event.stopPropagation();
        if($(this).hasClass("checked"))
        {
            $(this).removeClass("checked");
        }
        else if(!$(this).hasClass("disabled"))
        {
            $(this).addClass("checked");
        }
        else
            {
                return false;
            }


        var results=$("#products li");
        results.hide();
        $("#filters li.filtersGroup a").removeClass("disabled");
        $("#filters li.filtersGroup").each(function(index) {
            var classes="";

            $(this).find("a.checked").each(function(index) {
                classes=classes+ "." + $(this).attr("id") +",";
            });
            if(classes=="") return true;

            results=results.filter(classes.substr(0,classes.length-1));
//periorismos
                $("#filters li.filtersGroup").not($(this)).each(function (index){
                    $(this).find("a").each(function(index) {


                if(results.filter("." + $(this).attr("id")).length<=0) {
                       $(this).removeClass("checked").addClass("disabled");
                   }

            });



        });
    });
    results.show();



})
});

任何想法如何改进它?另外，我可以采取什么措施来防止preventdefault(如果未加载整个文档，则不会触发它，因为这可能对不熟练的人来说是个问题..

Any ideas how to improve it? Also what can i do about preventdefault (itsnot triggered if the whole document isnt loaded,because this may be a problem for impacient people..

推荐答案

我注意到的一件事是，您正在对$()进行不必要的调用很多:

One thing I notice is you're doing a lot of unnecessary calls to $():

    if($(this).hasClass("checked"))
    {
        $(this).removeClass("checked");
    }
    else if(!$(this).hasClass("disabled"))
    {
        $(this).addClass("checked");
    }
    else
    {
        return false;
    }

每次执行$(this)时，都会涉及多个底层函数调用和几个内存分配.完全没有必要.只要做:

Every time you do $(this), there are multiple underlying function calls and a couple of memory allocations involved. It's completely unnecssary. Just do:

var $this = $(this);

...开头，然后:

    if($this.hasClass("checked"))
    {
        $this.removeClass("checked");
    }
    else if(!$this.hasClass("disabled"))
    {
        $this.addClass("checked");
    }
    else
    {
        return false;
    }

此(无双关)适用于您每次调用$()的时间，而不仅是$(this)，但您需要确保仅缓存结果，只要它确实不会改变即可(这取决于您要传入的选择器或元素).例如，如果不使用细齿梳子进行通读，则可能可以将$("#filters li.filtersGroup")的结果至少保存在一个地方，而不是让jQuery重新做一遍.

This (no pun) applies to any time you call $(), not just $(this), but you need to be sure you only cache the result for as long as it really will be unchanged (as that varies depending on the selector or element you're passing in). Without reading through with a fine-toothed comb, for instance, you can probably cache the result of $("#filters li.filtersGroup") in at least one place rather than making jQuery do the whole thing over again.

这篇关于提高此jquery脚本的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！