Web Inspector: speed-up Element.prototype.removeChildren

• Component: Web Inspector (Deprecated)
• Status: RESOLVED FIXED

[Nikita Vasilyev]

The current Element.prototype.removeChildren is using `element.innerHTML = ""`. It's the slowest method in my benchmarks:

http://jsperf.com/remove-all-child-nodes/2 (20x faster in WebKit, 35x in Chrome)
http://jsperf.com/remove-all-child-nodes-5-childs/3 (1,6 faster in WebKit, 2x in Chrome)
http://jsperf.com/remove-all-child-nodes-zero-childs (1,6 faster in WebKit, 2x in Chrome)

[Nikita Vasilyev]

Created attachment 63840 [details]
patch

[Pavel Feldman]

Comment on attachment 63840 [details]
patch

In fact I've done the opposite optimization earlier:
https://bugs.webkit.org/show_bug.cgi?id=31160

Timeline was lagging visually on scrolling and clearing + shark was showing this to be the slow operation. I'd suggest that you try those. Wrt benchmarks, I think they lack listeners - adding those would change the WebKit picture a lot. I know that the bindings have improved, but still, single call to native will always be ways faster.

[Nikita Vasilyev]

(In reply to comment #2)
> (From update of attachment 63840 [details])
> In fact I've done the opposite optimization earlier:
> https://bugs.webkit.org/show_bug.cgi?id=31160
> 
> Timeline was lagging visually on scrolling and clearing + shark was showing this to be the slow operation. I'd suggest that you try those. Wrt benchmarks, I think they lack listeners - adding those would change the WebKit picture a lot. I know that the bindings have improved, but still, single call to native will always be ways faster.

Oh, I didn't think about reflow. At this case `element.textContent = ""` would be faster.

By the way, what are Wrt benchmarks?

[Nikita Vasilyev]

Created attachment 63842 [details]
this.textContent = ""

http://elv1s.ru/files/js/removeChildren.html
Now innerHTML and textContent works the same. removeFirstChild is a little slower.

When inspecting the DOM, there are many calls of removeChildren while an element already doesn't have children. So I added `if (this.firstChild)` check.

[Pavel Feldman]

Comment on attachment 63842 [details]
this.textContent = ""

Thanks for doing this!

[Eric Seidel (no email)]

Comment on attachment 63842 [details]
this.textContent = ""

Clearing flags on attachment: 63842

Committed r64952: <http://trac.webkit.org/changeset/64952>

[Eric Seidel (no email)]

All reviewed patches have been landed.  Closing bug.