提高我的 JQuery 的性能

Question

我对 JavaScript 和 JQuery 世界还很陌生，所以我的代码结构仍然在那里。我知道有一些编写方法可以减少对性能的压力，从而使您的程序运行得更快。

我已经研究了实现这一目标的各种方法，但不知道如何将其应用于我所拥有的东西。我正在寻找堆栈溢出来帮助向我展示一些关于使我的代码在结构上更合理的建议。

            console.log(wordIsCorrect);
            console.log($('.drop-box.spellword').length);
            if ($('.drop-box.spellword').length == wordIsCorrect) {

                $('.drop-box.spellword').addClass('wordglow2');
                $(right).val('Well Done!');
                $(right).show();
                audioS.play();
                $('.counter').html(completeWords + '/6').show();
                $(wrong).hide();
                $('.minibutton').prop('disabled', false);
                var completeLetters = $('.wordglow2').length;
                var completeWords = (completeLetters / 3);
                $('.counter').html(completeWords + '/6');

                if (completeWords == 3) {
                    $('table').fadeOut(2000);
                }

                var incompleteWords = $('.spellword').hasClass('.wordglow4').length;
                if (incompleteWords == 3) {
                    $('.minibutton').prop('disabled', false);
                }


            } else {

                $('.drop-box.spellword').addClass("wordglow4").css('color', 'transparent');
                $(wrong).val('Try Again');
                $('.minibutton').prop('disabled');
                $(wrong).show();
                audioF.play();
                $('.counter').html(completeWords + '/6').show();
                $(right).hide();
                $('.drop-box.spellword').animate({
                    'opacity': 1
                }, 1000, function() {
                    $(this).removeClass('wordglow4').removeClass('occupied').html('')
                });

            }

这是我代码中的 if 语句之一。我知道我应该单独分解每个任务，但我不知道从哪里开始。

谁能指出我正确的方向，以便我可以开始处理我的其余代码。谢谢！

Answer 1

1) 使用链接，它会减少 DOM 请求的数量：

    $(right).val('Well Done!')
            .show();

2) 如果您多次使用变量并缓存变量：

    $dropbox = $('.drop-box.spellword');
    $dropbox.css(bla bla bla...);

Answer 2

您应该注意的事情之一是链接您的 jQuery 调用。

例如：

$('#myinput').val("foo");
$('#myinput').show();

可以写成

$('#myinput').val("foo").show();

因为每次调用 jquery 函数（通常）都返回相同的对象。情况并非总是如此。在使用了 height() 或 find(..) 之类的函数后，显然该对象将不再是您开始使用的同一个 jQuery 对象，因此您需要确保您的函数顺序。

这可能会稍微提高速度，因为 jQuery 不必每次都重新创建该对象。 您还可以“缓存” jquery 对象以达到相同的效果，如下所示：

var myinput = $('#myinput');

myinput.val("foo");
// ... later
myinput.show();

这样可以节省多个 jQuery 调用。

这些优化非常小，但它们会迅速增加，因为 javascript 事件可以一直触发。

Answer 3

除了链接之外，使用context 还可以提高（选择器）性能。这将告诉选择器在哪里寻找给定的元素（而不是总是从 DOM 根开始）。假设您有一个特定的 DIV“目标”要定位，它位于另一个 DIV“容器”内，您可以这样做：

$('#target', '#container').dostuff();

或

$('#myButton').click(function(){
    $('span', this).addClass('bar');
});

（其中this 是上下文）

在此处查看有关上下文的更多信息：Performance of jQuery selector with context

Answer 4

正如已经告知的那样，我只是在添加提示...

有时在处理嵌套元素及其父元素时，使用“end()”方法： 我不会复制/完成 jQuery 文档，因为它有据可查，请参阅 jQuery's end() function documentation

将此添加到您的书签中：

http://api.jquery.com/
http://www.artzstudio.com/2009/04/jquery-performance-rules/

Answer 5

类似的东西

var spellword = $('#spellword'); // give it an ID and cache the object 
console.log(wordIsCorrect);
console.log(spellword.length);
if (spellword.length == wordIsCorrect) {

    spellword.addClass('wordglow2');
    $(right).val('Well Done!').show();
    audioS.play();
    // $('.counter').html(completeWords + '/6').show(); // will be done later again
    $(wrong).hide();
    $('.minibutton').prop('disabled', false);
    var completeLetters = $('.wordglow2').length;
    var completeWords = (completeLetters / 3);

    if (completeWords == 3) {
        $('#table1').fadeOut(2000); // give it an ID
    }

    var incompleteWords = spellword.hasClass('.wordglow4').length>0;
    if (incompleteWords == 3) {
        $('#minibutton').prop('disabled', false); // give an ID
    }
} else {

    spellword.addClass("wordglow4").css('color', 'transparent');
    $('#minibutton').prop('disabled',true); // give an ID and a value 
    $(wrong).val('Try Again').show();
    audioF.play();
    $(right).hide();
    spellword.animate({
        'opacity': 1
    }, 1000, function() {
        $(this).removeClass('wordglow4').removeClass('occupied').empty()
    });

}

$('#counter').html(completeWords + '/6').show(); // give it an ID instead of a class