I’m testing my code that works with dynamic tables in Firefox. The tables I play with are ~1000 rows long and get generated from search results that are in JSON via templating engine.
The resulting string is like <table><thead>... and then I place the table into a placeholder element like this: $('#holder').html(str).
The first search gets rendered fast, where as the following ones are extremely slow. And it seems that most of the time takes placeholder clearing.
That is, if I place $('#holder').html("") or $('#holder').empty() before placing a new table, then this clearing takes much time and the rendering of the new table itself is as fast as it was.
Speaking about the numbers, rendering takes only 90 milliseconds whereas clearing takes 16 seconds.
I wrote this jsfiddle: http://jsfiddle.net/cJGR3/2/
If you press “Test me” consequently, you will notice that clearing will take most of the time.
How can I solve this issue?
As pointed out by DanielB, Firebug was the reason.