CODEWITHSUNDEEP
javascriptjquery
Tim Akgayev
Tim Akgayev

Reputation: 309

My jQuery is noticeably slower than native JS

I've rewritten my menu handling with jquery and all of a sudden all my menus appear to take significantly longer to open. With native JS the opening slide animation was played instantly after pressing the trigger, with jQ it takes a full second before the menu opens. I've since moved all the code back to native, but this is the basic function that I used for the opening.

jQuery version:

$("#apis_trigger").click(function() {

    $("#apis_menu").switchClass(dstart, dend);
    $("#apis_trigger .down_arrow").css("transform", "scaleY(-1)");

});

Native JavaScript:

document.getElementById("apis_trigger").onclick = function() {

    document.getElementById("apis_menu").classList.remove(dstart);
    document.getElementById("apis_menu").classList.add(dend);

    document.querySelector("#apis_trigger .down_arrow").style.transform="scaleY(-1)";
}

I'm just querying the selectors and switching classes, so I didn't expect this kind of a performance hit.

I knew about the performance penalty after reading this thread

This is the amount of code jquery goes through when we use a simple $('selector')

http://james.padolsey.com/jquery/#v=1.10.2&fn=init

But from reading other threads I thought that would only be apparent in larger scripts.

Just for reference I'm running this in Chrome on i7 2.3ghz w/9gb ram.

Upvotes: 0

Views: 63

Answers (1)

Tim Akgayev
Tim Akgayev

Reputation: 309

switchClass does animation of all properties for 400 ms by default. You should use $("#apis_menu").removeClass(dstart).addClass(dend) to make "fair" comparison.

– Yury Tarabanko 5 mins ago

Upvotes: 1

Related Questions