4 ms·

It's strange you blame jQuery outright for slowness of the DOM, and reference the jsFiddle as your reference point of speed. Writing this utilising jQuery for

It's strange you blame jQuery outright for slowness of the DOM, and reference the jsFiddle as your reference point of speed. Writing this utilising jQuery for DOM manipulation ( http://jsfiddle.net/YNxEK/7/ http://jsfiddle.net/YNxEK/7/ ) is getting me consistently faster results than the original fiddle ( http://jsfiddle.net/YNxEK/ http://jsfiddle.net/YNxEK/ ) on Firefox and Chrome.

Guillaume86 14y ago
You just use innerHTML with a big string, it's not the equivalent of the original fiddle and it's not a fair comparison.
- latviancoder 14y ago
  Here is a comparison, that looks more fair to me: http://jsfiddle.net/d5geB/ http://jsfiddle.net/d5geB/
- masklinn 14y ago
  Why not? The original fiddle uses a documentFragment and does a bulk-insert of that in the document itself.
emehrkay 14y ago
Dude, you aren't creating dom nodes. Here is the equivalent: http://jsfiddle.net/EmEhRKay/YNxEK/10/ http://jsfiddle.net/EmEhRKay/YNxEK/10/
- iwillreply 14y ago
  Why would you append on every loop. Rather than build the string and then append the whole lot on one block? If you compare the DOM of the original fiddle and the DOM of following the fiddle I posted. You will see they are the same. I'm not saying what I referenced is the 'best' way of doing things. But that the debate in the original article (based on the provided examples) is pretty null.
  - emehrkay 14y ago
    You're right, my example was different. But upon fixing it to match the original article's example, but with jQuery creating the dom nodes, it is still slower http://jsfiddle.net/EmEhRKay/YNxEK/13/ http://jsfiddle.net/EmEhRKay/YNxEK/13/
mikepurvis 14y ago
Interesting. On a whim, I tried changing your fiddle to use Array.join construction rather than string appends, but string appends remain 5-10% faster: http://jsfiddle.net/2kWdC/ http://jsfiddle.net/2kWdC/ That way uses an indexed for-loop, but the while loop with Array.push was just as bad.
- iwillreply 14y ago
  Interesting, I very briefly deliberated while vs for, and how the performance of both had changed since last look. But checking at: https://blogs.oracle.com/greimer/resource/loop-test.html https://blogs.oracle.com/greimer/resource/loop-test.html Still seemed to demonstrate a decreasing while loop as the fastest in my test.

Guillaume86 14y ago

You just use innerHTML with a big string, it's not the equivalent of the original fiddle and it's not a fair comparison.

latviancoder 14y ago
Here is a comparison, that looks more fair to me: http://jsfiddle.net/d5geB/ http://jsfiddle.net/d5geB/
masklinn 14y ago
Why not? The original fiddle uses a documentFragment and does a bulk-insert of that in the document itself.

emehrkay 14y ago

Dude, you aren't creating dom nodes. Here is the equivalent: http://jsfiddle.net/EmEhRKay/YNxEK/10/ http://jsfiddle.net/EmEhRKay/YNxEK/10/

iwillreply 14y ago
Why would you append on every loop. Rather than build the string and then append the whole lot on one block? If you compare the DOM of the original fiddle and the DOM of following the fiddle I posted. You will see they are the same. I'm not saying what I referenced is the 'best' way of doing things. But that the debate in the original article (based on the provided examples) is pretty null.
- emehrkay 14y ago
  You're right, my example was different. But upon fixing it to match the original article's example, but with jQuery creating the dom nodes, it is still slower http://jsfiddle.net/EmEhRKay/YNxEK/13/ http://jsfiddle.net/EmEhRKay/YNxEK/13/

mikepurvis 14y ago

Interesting. On a whim, I tried changing your fiddle to use Array.join construction rather than string appends, but string appends remain 5-10% faster: http://jsfiddle.net/2kWdC/ http://jsfiddle.net/2kWdC/ That way uses an indexed for-loop, but the while loop with Array.push was just as bad.

iwillreply 14y ago
Interesting, I very briefly deliberated while vs for, and how the performance of both had changed since last look. But checking at: https://blogs.oracle.com/greimer/resource/loop-test.html https://blogs.oracle.com/greimer/resource/loop-test.html Still seemed to demonstrate a decreasing while loop as the fastest in my test.