I did some performance testing with the following code, and found it
to be much slower than the cloneNode method, but still often twice as
fast as the current method.
jQuery.fn.removeAll = function() {
this.each(function() {
var nextSibling = this.nextSibling;
var parent = this.parentNode;
parent.removeChild(this);
while (this.firstChild) {
this.removeChild(this.firstChild);
}
if(nextSibling)
parent.insertBefore(this, nextSibling)
else
parent.appendChild(this);
});
};
What are the problems with the cloneNode method?
Devon
On Dec 13, 5:36 pm, Devon Govett <[email protected]> wrote:
> Yeah I tried that too, and it was slightly slower in most browsers
> than cloneNode. The other issue with this, is that if the user has a
> slow computer, or the removal is taking a really long time, layout
> problems may occur since there is no element in the DOM during the
> emptying. The cloneNode method has the advantage that during the
> emptying process nothing is removed from the screen and so things
> don't look weird. I know this is an edge case, but it is something to
> consider.
>
> Devon
>
> On Dec 13, 10:46 am, John Resig <[email protected]> wrote:
>
>
>
> > Actually, now that you bring this up, it would make a lot of sense to
> > just remove the element from the DOM first and /then/ go through and
> > clean up the child nodes, and finally re-inject the element again. I'm
> > hesitant to do a cloneNode because of the inherent problems that exist
> > in Internet Explorer. I'll see if I have some time to do some perf
> > testing on this later today.
>
> > --John
>
> > On Sun, Dec 13, 2009 at 8:19 AM, Devon Govett <[email protected]> wrote:
> > > Hi all,
>
> > > I've just blogged about a technique that I used to make jQuery.empty
> > > over 10x faster in some cases. Basically, rather than individually
> > > removing each child element from the DOM which causes the browser to
> > > reflow after each one, I use a shallow cloneNode to do the job then
> > > copying events back over. Check out the blog post for more details:
> > >http://devongovett.wordpress.com/2009/12/12/how-to-make-jquery-empty-....
> > > I've included some charts comparing the performance of jQuery 1.4's
> > > empty and html("") functions, as well as the function I've written,
> > > and the cloneNode method out performs all other methods by a
> > > significant amount in all browsers.
>
> > > Thanks for jQuery!
> > > Devon
>
> > > --
>
> > > You received this message because you are subscribed to the Google Groups
> > > "jQuery Development" group.
> > > To post to this group, send email to [email protected].
> > > To unsubscribe from this group, send email to
> > > [email protected].
> > > For more options, visit this group
> > > athttp://groups.google.com/group/jquery-dev?hl=en.
--
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en.
