Web Inspector: Don't render console messages until Console is opened

[Nikita Vasilyev]

Running the following code make Web Inspector unbearably slow in a couple of minutes:

setInterval(function() {
    console.log({x: Math.random()})
}, 200);

The low hanging fruit would be to simply not update Console's DOM when it isn't visible,
e.d. the split console is closed and the active tab isn't Console.

[Nikita Vasilyev]

When the console isn't visible, the console content view is already not present in the DOM. However,

https://github.com/WebKit/webkit/blob/master/Source/WebInspectorUI/UserInterface/Controllers/JavaScriptLogViewController.js#L276
WebInspector.JavaScriptLogViewController#_appendConsoleMessageView
keeps appending elements regardless of that.

When console isn't visible, it appends to a DOM element that is detached from the DOM:

>> this._currentConsoleGroup.element.parentNode.parentNode.parentNode
-> null

I wonder if modifying detached DOM is still making Web Inspector slow.

[Nikita Vasilyev]

After profiling in Timelines I noticed that I get 4 paints (!) on every console.info call when the split console is closed!

I intentionally used console.info instead of console.log that doesn't modify console message counts on the dashboard.

[Nikita Vasilyev]

I ran the following code in Firefox DevTools and Chrome DevTools for a couple of minutes:

setInterval(function() {
    console.log({x: Math.random()})
}, 1);

Both performed well — responsive and snappy.

I profiled Chrome DevTools and it seems that they use a custom requestAnimationFrame batching. Firefox DevTools use React.js.

[Radar WebKit Bug Importer]

<rdar://problem/26037238>

[Timothy Hatcher]

Isn't this a dupe?

[Timothy Hatcher]

*** This bug has been marked as a duplicate of bug 155629 ***

[Nikita Vasilyev]

(In reply to comment #5)
> Isn't this a dupe?

Yes, it is.