While writing my first jQuery application I encountered a performance
issue whichs casts doubts on the suitability of jQuery for my purposes
in general.
The "issue": In my page I have a dynamically filled <div> which in the
end contains about 10 elements, one of which is a table with 1000
rows. Now when I try to clear that <div> with a simple function like
function clearContainer() {
$('#' + Container_ID).empty();
}
this will take forever, i.e. one faster machine a few seconds, on my
netbook it even leads to javascript timeout errors.
Rewriting the function to
function clearContainer() {
var containerNode = document.getElementById(Container_ID);
while(containerNode.hasChildNodes()) {
containerNode.removeChild(containerNode.lastChild);
}
}
fixes the perfomance issue, the <div> is cleared almost immediately.
Two questions remain:
1. How can the results be explained? What is jQuery doing to empty an
element?
2. Are there any rules when not to use jQuery for certain DOM tasks
but better to resort to direct DOM manipulation as in the example
above?
