提高JQuery的性能

Increasing the performance of my JQuery

本文关键字：性能 JQuery 提高      更新时间：2023-09-26

我对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语句之一。我知道我应该把每项任务单独分解，但我不知道从哪里开始。

有人能给我指明正确的方向吗？这样我就可以开始处理剩下的代码了。谢谢！

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

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

2） 如果您多次使用变量，请缓存它们：

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

您应该关注的一件事是链接您的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事件可以一直触发，因此它们会迅速增加。

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

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

或

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

（其中this是上下文）

请在此处查看有关上下文的更多信息：带有上下文的jQuery选择器的性能

正如前面所说，我只是在添加提示。。。

有时在处理嵌套元素及其父元素时，请使用"end（）"方法：我不会复制/完成jQuery文档，因为它有很好的文档记录，请参阅jQuery的end（）函数文档

将此添加到书签中：

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

类似的东西

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
相关文章：