Dev Tip: Faster Selects w/Tag Name

Posted on by

jQuery provides an extremely versatile DOM query mechanism. If you’re wondering what’s happening under the covers, and if there are less- and more-performant ways to formulate your query . . . the answer is YES. In many cases you can help jQuery by specifying a tag name, i.e.:

$("div.class").show()

is faster than:

$(".class").show()

. . . with the difference being that the query engine can narrow by tag name first. It’s smart like that.

So, you shoud be in the habit of specifying a tag name. The only exception: getting by ID. If you’re getting by ID, do not include a tag name, or anything else besides the ID selector.

Note that the second example here (with the class selector only) is perfectly valid, and if you need to query for multiple element types, by all means go ahead — jQuery will still return the correct results.

10 thoughts on “Dev Tip: Faster Selects w/Tag Name”

  2. Pingback: » Velocidad en la selección de elementos en jQuery - Scriptia

  3. Joe Kohlmann on said:

    Would JQuery also perform faster if the element selector hierarchy were more directly specified in the $() function query?
    Example:
    $(‘#content dl dt a’) versus $(‘#content dt a’)
    Thanks for the tip, by the way.

  6. Chris Domigan on said:

    On a related note, does anyone know if browsers implement CSS faster if your style sheets are similarly structured? i.e. with element.class instead of just .class.

    Obviously when it comes to structuring your style sheet/s it’s a lot easier having just the class name so you can tell at a glance what the style is for!

    Chris

  7. Culture traveller on said:

    I haven’t dug through the code for this, certainly, but when I read the notation that when using an ID you shouldn’t use any other selector for optimum performance, my first thought was, “could you just ignore the rest of the selector if an ID is used?” (Although I suppose that would break in the case where there was, say, a TD element with a specified ID in the doc, but the jQuery call used a selector “TH #id”…

    jQuery looks pretty amazing, though. I’ve been looking at using Prototype for some upcoming development work but I think now that I may go with jQuery instead.