Bug 152418 – Web Inspector: Make WebInspector.ConsoleMessageView faster

• Component: Web Inspector
• Status: RESOLVED CONFIGURATION CHANGED

[Nikita Vasilyev]

Created attachment 267609 [details]
[Image] Stacktrace in Timelines

Web Inspector spends on average takes 23ms in WebInspector.ConsoleMessageView [1].
It's too slow to add one message per every requestAnimationFrame.

1: JS code used:

    console.info(Math.random())

I'm running this on MacBook Pro 2.8 GHz i7, mid 2014.

[Nikita Vasilyev]

(In reply to comment #0)
> Created attachment 267609 [details]
> [Image] Stacktrace in Timelines

This timeline recording shows that _appendLocationLink takes 23.13ms
out of 23.43ms of ConsoleMessageView execution time. That's 98.7%!
98.7% of ConsoleMessageView execution time spent on adding the source link.

I don't understand what happens in addEventListener selected on the image.
Timelines doesn't tell me why *adding* an event listener takes so long.

[Nikita Vasilyev]

Created attachment 267612 [details]
[Image] _clearFocusableChildren

Less severe bottleneck is querySelectorAll("[tabindex]"):

    _clearFocusableChildren()
    {
        var focusableElements = this.messagesElement.querySelectorAll("[tabindex]");
        for (var i = 0, count = focusableElements.length; i < count; ++i)
            focusableElements[i].removeAttribute("tabindex");
    }

It's called twice for every didAppendConsoleMessageView.

[Nikita Vasilyev]

And finally, isScrolledToBottom is slow.

It gets executed even if the console isn't visible. We should check WebInspector.consoleContentView.visible.

[Nikita Vasilyev]

(In reply to comment #1)
> (In reply to comment #0)
> > Created attachment 267609 [details]
> > [Image] Stacktrace in Timelines
> 
> This timeline recording shows that _appendLocationLink takes 23.13ms
> out of 23.43ms of ConsoleMessageView execution time. That's 98.7%!
> 98.7% of ConsoleMessageView execution time spent on adding the source link.
> 
> I don't understand what happens in addEventListener selected on the image.
> Timelines doesn't tell me why *adding* an event listener takes so long.

Our addEventListener is O(n).

        for (var i = 0; i < listeners.length; ++i) {
            if (listeners[i].listener === listener && listeners[i].thisObject === thisObject)
                return;
        }

Put it in a loop and it's O(n^2)!

[Radar WebKit Bug Importer]

<rdar://problem/24243579>

[Nikita Vasilyev]

(In reply to comment #4)
> (In reply to comment #1)
> > (In reply to comment #0)
> > > Created attachment 267609 [details]
> > > [Image] Stacktrace in Timelines
> > 
> > This timeline recording shows that _appendLocationLink takes 23.13ms
> > out of 23.43ms of ConsoleMessageView execution time. That's 98.7%!
> > 98.7% of ConsoleMessageView execution time spent on adding the source link.
> > 
> > I don't understand what happens in addEventListener selected on the image.
> > Timelines doesn't tell me why *adding* an event listener takes so long.
> 
> Our addEventListener is O(n).
> 
>         for (var i = 0; i < listeners.length; ++i) {
>             if (listeners[i].listener === listener &&
> listeners[i].thisObject === thisObject)
>                 return;
>         }
> 
> Put it in a loop and it's O(n^2)!

This was addressed over a year ago.

However, issues mentioned in comments 1–3 weren't.

[Devin Rousso]

(In reply to Nikita Vasilyev from comment #6)
> However, issues mentioned in comments 1–3 weren't.
@Nikita I just tried to reproduce your results, and no matter what I try, I can't get `_clearFocusableChildren` or `isScrolledToBottom` to even appear in my profiles.  Can you still reproduce?

[Nikita Vasilyev]

Created attachment 359009 [details]
[Image] Timelines

No, I can no longer reproduce it. This is a test page I used: http://nv.github.io/webkit-inspector-bugs/slow-console/

Console with 5k messages is still slow to interact, but it's a separate issue.

[Nikita Vasilyev]

Closing. WebKit and/or our hardware have became faster.