To test this, we created a short snippet where we added and removed div elements to the body 10,000 times. We created four different cases.
- Create everything with jQuery, lookup for elements to be removed using jQuery.
- Create everything with jQuery, but cache the elements so that the extra lookup is avoided.
- Create everything with jQuery, but instead of deleting objects, save them and reuse them.
- Do everything with native xml functions (createElement, removeElement etc), use cache and reuse elements.
I would have expected that the biggest difference would be between case 1 and 3, since object creation is an "expensive" operation.
The results looked like this:
|Browser||Case 1||Case 2||Case 3||Case 4|
The results were kind of surprising. Reusing elements are efficient, but not the kind of performance booster as it is in Flash or Cocoa. But what are very clear are two things: jQuery's DOM append is very expensive, and Chrome are a lot faster than Firefox. On Chrome the difference between the original script and the "optimized" case was especially large, with a performance boost of 10 times!
(I did this as a part of a project here at Betsson. We do great stuff here and have a lot of fun as well, so check out Betsson's open positions!)