100

I recently upgraded my version of PHPStorm IDE and it now warns me about inefficient jQuery usage.

For example:

var property_single_location = $("#property [data-role='content'] .container");

Prompts this warning:

Checks that jQuery selectors are used in an efficient way. It suggests to split descendant selectors which are prefaced with ID selector and warns about duplicated selectors which could be cached.

So my question is:

Why is this inefficient and what is the efficient way to do the above selector?

I'd guess at:

var property_single_location = $("#property").find("[data-role='content']").find(".container");

Is this the right way?

Improve this question

3 Answers 3

Reset to default
156

I had the same question today and was able to find a solution thanks to Scott Kosman here.

Basically the answer is to select IDs individually and then use .find(...) for anything below. So taking your example:

$("#property [data-role='content'] .container");

Changing it to this makes PhpStorm happy and can evidently be more than twice as fast:

$("#property").find("[data-role='content'] .container");
Improve this answer
2
  • 1
    For my taste $('[data-role="content"] .container', '#property'); is more readable.
    – n3rd
    Commented Jun 7, 2013 at 12:42
  • 26
    @n3rd Funny, I don't find that approach readable at all, but to each his own they say.
    – MikeSchinkel
    Commented Jun 7, 2013 at 22:04
19

I believe the difference between the two methods when using recent versions of jQuery and browsers is negligible. I constructed a test that shows that it is now actually 10% faster to do a combined selector rather than selection on id and then find for a very simple case:

http://jsperf.com/jquery-find-vs-insel

For selection of multiple children by class at any depth, the "find" does appear to be faster:

http://jsperf.com/jquery-find-vs-insel/7

There was some discussion about this on jQuery forums, but its 3 years old: https://forum.jquery.com/topic/which-jquery-selection-is-efficient As they point out here, if you are doing a lot of operations on same id selector, the greatest performance improvement is found by caching the top level element. On the other hand if you are doing just a few selections, there is going to be virtually no performance difference.

Therefor I believe that IntelliJ is overstating the importance of this code style.

Improve this answer
2
  • 4
    In your first test, you are using the direct decedent select ">". I ran your first test without ">", and using "find" is faster. jsperf.com/jquery-find-vs-insel/12
    – beardedlinuxgeek
    Commented Feb 12, 2015 at 18:10
  • The thing I find about this most interesting is that the latest versions of Safari process the direct method fastest by about 25%. I don't know what they've done, but apparently all the other browsers haven't caught on.
    – Uxonith
    Commented Mar 13, 2015 at 21:31
14

The first question is to hit Alt+Enter, and select the first tip in the list, then hit Enter, you'll see what it thinks the most efficient way.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.