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.
(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.
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.
And finally, isScrolledToBottom is slow. It gets executed even if the console isn't visible. We should check WebInspector.consoleContentView.visible.
(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)!
<rdar://problem/24243579>
(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.
(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?
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.
Closing. WebKit and/or our hardware have became faster.