In jQuery, is it a bad idea to use [name = X] for all selectors?

Question

I use Backbone and decided that I needed a way to distinguish between HTML elements that were connected and those that were not.

So I would write (in HAML):

.container .title(name='title') .separator 

As you can see, it’s clear that the dynamic element is the title.

The reason for this was that I could mess around with the style and rename the classes without worrying about breaking the application. It also means that in the template, I can say that dynamic elements do not need to go back and forth with the Backbone View.

This means that I am using $('[name=title]', this.el) to refer to this element from the code. I am wondering if this is slow and be a noticeable problem when used everywhere. I read that id is the fastest. I use item lists, so id unrealistic. How does a class compare with a name search?

Also, if you have any suggestions on tracking dynamic elements in HTML templates, I'd love to hear them.

---

FYI:

• I had an idea because I originally used the Backbone.ModelBinding plugin, which used data-bind attributes for dynamic elements, but now I'm leaving it.

• I use CoffeeScript, Backbone and haml_coffee templates.

• I also read $(this.el).find('[name=title]') faster than providing context to the selector.

---

Follow up question:

Agreement to indicate whether an HTML element refers to JS code

Updated jsperf to check all offers:

http://jsperf.com/class-or-name-attr-lookup/3

Answer 1

Finding the DOM element name attribute may be slightly slower than the class due to the need for Sizzle - the selection mechanism used by jQuery - you will need to parse the selector to determine exactly what to find, Sizzle would need to be determined from the string "[name = title ] ", that you first need to look for the" name "attribute for all found elements and that the value of this attribute is" exact ". Although I read that Sizzle is very fast at what it does, I can only assume that it will be slower than its own JavaScript call to the attribute of the DOM class (element.className) - the value.

To confirm my suspicions, I did perf: http://jsperf.com/class-or-name-attr-lookup . The results are not something I could suspect in the calls to .find and .children, but what I said above seems to be supported in the first two examples, at least. However, I have seen performance improvements in production code using the most specific selector - for example..children instead of .find - since it does not iterate over unnecessary elements.

In addition, I did a test some time ago to highlight some of the differences between using simple syntax and even more obscure and / or jQuery-ish syntax to compare performance, which I thought was interesting: http://jsperf.com / id-id-vs-id-class / 2 .

Hope someone or one of them helps someone.

Answer 2

searching by name is probably no worse than searching in classes, but keep in mind that with the selector you specify, it will need to list all the DOM elements to find it. If I were you, I would at least indicate the type that you need:

 this.$("div[name=title]") 

Also pay attention to the shorthand, which you can use inside the main view; this. $ is a shortcut for $ (this.el) .find, which functionally matches $ (selector, this.el)

EDIT

To answer your further question as to why this would be, there are no functions in the DOM that will return all elements with a specific class name; it’s possible that there is something newer that I don’t know about, but a quick Google search has not changed, if so. You can look at an example implementation here to find DOM nodes with a specific class .

Since this algorithm requires cyclic movement across all elements in the set, there is nothing more expensive than checking the name attribute than checking the class attribute. (note that I didn’t really compare this, but I don’t know the reason to suspect otherwise).

This leads to the fact that I suggested at least indicating the type of the DOM element; if you use a selector such as $ ("[name = title]") then jquery will be forced to list each element in the DOM to find what you are looking for; in this case you are only looking for a small subset of the DOM (children of your representation ), so it’s not so important, but if you specify a type like $ ("div [name = title]"), then it can at least do an optimization using getElementsByTagName, if available.

(I say where available, because I believe that some browsers allow getElementsByTagName to be called on a subset of the DOM nodes, and some only on the document)