I want to set so many attributes for multiple elements. Javascript always give better performance when paring to jquery.

i want to know which one gives better performance when settling multiple attributes via jquery and javascript.

Jquery multiple attribute setter:

$(element).attr({'id': 'id1', 'index':1, 'value':10,'check':'checked'});

using javascript setAttribute :

element.setAttribute('id','id1');
element.setAttribute('index','1');
..................................

when am using javascript i need to write multiple lines. otherwise need to create custom function for this.

can anyone explain which one gives better performance ? and why ?

Thanks,

Siva

I want to set so many attributes for multiple elements. Javascript always give better performance when paring to jquery.

i want to know which one gives better performance when settling multiple attributes via jquery and javascript.

Jquery multiple attribute setter:

$(element).attr({'id': 'id1', 'index':1, 'value':10,'check':'checked'});

using javascript setAttribute :

element.setAttribute('id','id1');
element.setAttribute('index','1');
..................................

when am using javascript i need to write multiple lines. otherwise need to create custom function for this.

can anyone explain which one gives better performance ? and why ?

Thanks,

Siva

• javascript
• jquery

• 1 Unless you are talking about 100s of elements and 10s of properties, the cleaner .attr() way is the way to go. – techfoobar Commented Nov 27, 2013 at 6:20
• @techfoobar am going to set more than 100 properties for more than 100 elements in a iteration.which one is best and why ? – SivaRajini Commented Nov 27, 2013 at 6:22
• Why are you setting attributes when setting properties is likely faster and more appropriate? – RobG Commented Nov 27, 2013 at 6:24
• Try it yourself: jsperf.. – Felix Kling Commented Nov 27, 2013 at 6:24
• A lot of those 100 properties i assume will be custom properties. It may be better to have one JS object containing all those and store it in one go using .data(). As for the HTML defined properties, vanilla will likely be faster since you have so many elements. Use jsperf. to know the exact performance implications. – techfoobar Commented Nov 27, 2013 at 6:25

4 Answers 4

Here is a jsperf which tests setting of attributes. I'm not sure that it covers your situation but as the others said - pure javascript is a lot faster then using a library. (I'm not even sure that the jsperf is a valid one. I mean if it test what you need).

http://jsperf./aaa-setting-attribute

jQuery version is 66% slower then the pure javascript variant.

Computers cost much less than programmers.

Let's say:

Using pure js will make code run for 1ms, and programmer work 3 hours.

Using jQuery will make code run for 2ms and programmer work 1 minute

See profit?

You should probably be setting properties, not attributes, as they are more consistent across browsers and have a more consistent effect on DOM elements (sometimes setting an attribute affects the property, sometimes it doesn't). Setting the property nearly always has the desired affect (e.g. setting a checkbox to checked), setting the related attribute doesn't always.

You can also use a small function if you want to set multiple properties on an element:

function setProperties(element, props) {
  for (var prop in props) {
    if (props.hasOwnProperty(prop)) {
      element[prop] = props[prop];
    }
  }
}

I can't see that it would be any slower than jQuery.

jQuery is a library, so I think it better than pure javascript. It help you to use javascript easier. I supposed that! You can see the same question here

If you want to get all of attributes of element, you can see here also.