When jQuery 1.4 came out last week I just finished a large project involving lots of ajax, XML-parsing and DOM-manipulation. In this backoffice-tool large tables replace other objects in the page and then events are being bound to cells, icons in the cells for context-menus …
What was reasonable fast with my test-data became a sleeping snail after the customer started working with it, adding some hundred lines of real data.
I figured out there were two extreme time-expensive things in what I was doing there:
- injecting new elements in the site
- eventbinding to lots of DOM-objects
The later was fixed easily and (as I think) nifty – I will talk about that in another post. The DOM-injection was a problem because jQuery is doing some clever things when deleting elements from the DOM to prevent memory-leaking. So simply using .innerHTML= instead of .html() was an option for me, but not one i liked.
So there was some excitement when I figured out that .empty() and .html() were among the things that had been speed up in jQuery 1.4.
I set up a testpage for my scenario (adding, removing and binding events to large tables) comparing jQuery 1.3.2 with 1.4 in Firefox 3.5.5 and see what I’ve got: