Is setting id with native javascript faster than with jQuery?

Question

The two ways I know to set the id of an element in javascript are as follows:

var myDiv = document.createElement('div');
$(myDiv).attr('id', 'myDiv');

var myDiv = document.createElement('div');
myDiv.id = 'myDiv';

I'm guessing the second one is better because it doesn't use jQuery, is this true?

Answer 1

Yes, the vanilla javascript solution will be the fastest here (although in this case we are talking extreme microseconds).

Function calls are expensive. And when you call .attr, you are making a function call (defined in the jQuery library) which then ends up doing essentially the native method anyways.

As @Vohuman has also pointed out in the comment on this answer, you also have the overhead of even creating the jQuery instance for the elements passed to it. To even begin though with jQuery though, have to include the jQuery library which also takes up time.

Answer 2

You can measure the duration of functions by repeating the execution in a loop. Measure the seconds and calculate the difference. It is about 7.5 times faster. You can execute the measurement right now, right here:

var loops = 100000;

var beforeJQuery = Date.now();

for(var i = 0; i < loops; i++) {
  var myDiv = document.createElement('div');
  $(myDiv).attr('id', 'myDiv');
}

var beforeVanilla = Date.now();

for(var i = 0; i < loops; i++) {
  var myDiv = document.createElement('div');
  myDiv.id = 'myDiv';
}

var afterVanilla = Date.now();

var executionTimeJQuery = (beforeVanilla - beforeJQuery);
var executionTimeVanilla = (afterVanilla - beforeVanilla)

console.log(executionTimeJQuery + "ms took the execution of the jQuery method for " + loops + " loops. This is ~" + (executionTimeJQuery / loops) + "ms  per execution.");
console.log(executionTimeVanilla + "ms took the execution of the vanilla method for " + loops + " loops. This is ~" + (executionTimeVanilla / loops) + "ms  per execution.");

console.log("The vanilla method is " + (executionTimeJQuery / executionTimeVanilla) + " faster than the jQuery method.");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

Approximately 10 times faster.

const iterations = 10000;
const myDiv = document.createElement('div');

console.time('jQuery');
  for (let i = 1; i < iterations; i++) {
    $(myDiv).attr('id', 'myDiv');
  }
console.timeEnd('jQuery');

const myDiv2 = $(myDiv);
console.time('jQuery with object');
  for (let i = 1; i < iterations; i++) {
    myDiv2.attr('id', 'myDiv');
  }
console.timeEnd('jQuery with object');

const myDiv3 = document.createElement('div');

console.time('Vanila Javascript');
  for (let i = 1; i < iterations; i++) {
    myDiv3.id = 'myDiv';
  }
console.timeEnd('Vanila Javascript');

jQuery: 41.998ms
jQuery with object: 32.513ms
Vanila Javascript: 4.670ms

Edit:

If you have jQuery in project you can use it without that speed difference is not significant. This micro optimization is not wort it. If you are not making Javascript FPS game :)

Edit2: @Bergi adding createElement in the timing function will not change the results significantly as you can see below.

const iterations = 10000;

console.time('jQuery');
  const myDiv = document.createElement('div');
  for (let i = 1; i < iterations; i++) {
    $(myDiv).attr('id', 'myDiv');
  }
console.timeEnd('jQuery');


console.time('jQuery with object');
  const myDiv2 = $(document.createElement('div'));
  for (let i = 1; i < iterations; i++) {
    myDiv2.attr('id', 'myDiv');
  }
console.timeEnd('jQuery with object');

console.time('Vanila Javascript');
  const myDiv3 = document.createElement('div');
  for (let i = 1; i < iterations; i++) {
    myDiv3.id = 'myDiv';
  }
console.timeEnd('Vanila Javascript');

jQuery: 35.493ms
jQuery with object: 21.310ms
Vanila Javascript: 4.515ms