Increasing the performance of my JQuery

Question

I am fairly new to the JavaScript and JQuery world so the structure of my code is still getting there. I understand that there are methods of writing it so that it puts less strain on performance and thus makes your program work faster.

I have looked at various ways to achieve this but can't see how to apply it to what I have. I am looking to stack overflow to help show me a few pointers on making my code more structurally sound.

            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('')
                });

            }

This one of the if statements in my code. I understand that I should be breaking each task up individually but I don't know where to start.

Can someone point me in the right direction so that I can start tackling the rest of my code. THANKS!

I'd start by caching your objects to prevent needlessly constructing jQuery objects. — Blender, Sep 14 '12 at 08:31
I'm not sure you'll be able to inscrease the performance of your script, but you could split your code in several functions to have a better readability. — sp00m, Sep 14 '12 at 08:35
You use `$(wrong)` multiple times, for example. Put it into a variable instead: `var $wrong = $(wrong);`. Now, your object is in a variable and you can use `$wrong` in place of `$(wrong)` (in JS, `$` is a valid variable name character. It's nothing special). — Blender, Sep 14 '12 at 08:36

score 5 · Accepted Answer · answered Sep 14 '12 at 08:35

5

1) Use chaining, it will decrease number of DOM requests:

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

2) And cache variables if you use them more then once:

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

answered Sep 14 '12 at 08:35

Yakovenko Max

327
2
6

I have had a go at making the variable dropBox but it has broke my code http://jsfiddle.net/smilburn/PM5yg/4/ @Yakovenko Max – sMilbz Sep 14 '12 at 08:46

score 3 · Answer 2 · answered Sep 14 '12 at 08:37

One of the things you should look at is chaining your jQuery calls.

For example:

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

can be written as

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

since each call to a jquery function (usually) returns the same object. This isn't always the case; after using a function like height() or find(..) obviously the object will no longer be the same jQuery object you started with so you need to make sure of your function order.

This may give a tiny speed increase because jQuery isn't having to go all the way through creating that object again each time. You can also "cache" jquery objects to the same effect, like so:

var myinput = $('#myinput');

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

Which saves multiple jQuery calls.

These optimisations are very small, but they mount up quickly as javascript events can be fired off all the time.

I have had a go at making the variable dropBox but it has broke my code http://jsfiddle.net/smilburn/PM5yg/4/ @moopet — sMilbz, Sep 14 '12 at 08:45

score 2 · Answer 3 · edited May 23 '17 at 10:25

Besides chaining, using context will also improve (selector) performance. This will tell the selector where to look for the given element (as opposed to always starting from the DOM root). Say you have a particular DIV 'target' you want to target, which is somewhere inside another DIV 'container', you can do this:

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

or

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

(where this is the context)

see more about context here: Performance of jQuery selector with context

score 1 · Answer 4 · answered Sep 14 '12 at 08:45

As things have already been told I am just adding tips ...

sometime when processing on nested elements and their parents, use the "end()" method : I'm not going to copy/complete jQuery documentation since it is well documented see jQuery's end() function documentation

Add this to your bookmarks :

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

score 0 · Answer 5 · answered Sep 14 '12 at 08:44

Something like this

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

Increasing the performance of my JQuery

5 Answers5