CODEWITHSUNDEEP
javascriptjqueryprofilingfirebug
PaulJ
PaulJ

Reputation: 1708

Profiling jQuery: how to interpret the results

I have a page that uses jQuery and can run very slow in certain circumstances, and I'm trying to profile it using Firebug and Firequery. I've let it run, used the page... and when I get the results, I see that the functions that are consuming most CPU time are:

elementMatcher/<        (jquery-2.1.0.js (línea 2113))
Sizzle</Sizzle.selectors.filter.ATTR/<         (jquery-2.1.0.js (línea 1617))
Sizzle</Sizzle.attr         (jquery-2.1.0.js (línea 1407))
matcherFromGroupMatchers/superMatcher     (jquery-2.1.0.js (línea 2297))

Okay. And now... what? How do I know which of my selectors are consuming the most CPU, based on this data?

(I suspect I'll have to rewrite some of the selectors that are using attributes right now, based on that Sizzle</Sizzle.selectors.filter.ATTR/< thing, but beyond that, is there any more information I can get?)

Upvotes: 1

Views: 446

Answers (1)

Sebastian Zartner
Sebastian Zartner

Reputation: 20095

To investigate further what triggers the call to Sizzle</Sizzle.selectors.filter.ATTR you can right-click it and choose Set Breakpoint from the context menu and then trigger the action again you did before. (Maybe a page reload is required before doing that.)

Though to improve the speed of the mentioned selector, it might be faster when you write this:

$("select[name=blabla] > :selected");

Furthermore you can improve performance by adding an ID to the <select> and query for that like this:

$("#blabla > :selected");

It is probably even faster using pure JavaScript instead of jQuery, which you can do like this:

document.querySelector("#blabla > [selected]");

or like this:

var blabla = document.getElementById("blabla");
blabla.options[blabla.selectedIndex];

Upvotes: 1

Related Questions