1437567 - Major jank with dev tools open on Youtube

Status: NEW

(DevTools :: Console, defect, P2)

Description

[Johan C]

I'm trying to debug a web extension for youtube that I'm working on (barely started), but I an unable to do so because of major jank when openening a youtube video. I promised aswan on the web-ext channel on mozilla's IRC that I would capture a profile, so here it is.

Note: I removed my extension before capturing the profile, so it should not be the cause.

Note 2: The browser was launched with the web-ext tool (version 2.2.2). The default temporary profile was used.

Note 3: I have yet so successfully reproduce this on a clean profile other than web-ext's profile.


STR (what I did to reproduce the bug this time):
1. web-ext run (Intermittently I can reproduce the bug on an existing profile when I disable ublock origin, so web-ext shouldn't be the problem either).
2. I opened youtube video via the youtube homepage (I used https://www.youtube.com/watch?v=xZNBFcwd7zc&index=1&list=PLzjFbaFzsmMT_VuMSVQxfkQIw7VNbHyVi to capture the attached profile
3. I installed the gecko profiler (https://perf-html.io/).
4. I opened the web console with F12.
5. I opened the gecko profiler and clicked "start".


Result:
The entire browser becomes unresponsive with any action (click, keyboard input) taking several seconds to "fire" (e.g. clicking/"K" the video to pause it).

The web console gets spammed, see attached file: "console-spam.txt"). Any of the following dev tools will cause the jank; Browser Console (ctrl+shift+J), Web Console (F12), and the dev tools launched via "about:debugging" -> "Debug".


URL to the profile I captures: https://perfht.ml/2EjrLfL

Comment 1

[Johan C]

Attachment: (gzipped json) Firefox 2018-02-12 16.18 profile.sps.json.gz

Comment 2

[Johan C]

Attachment: console-spam.txt

Comment 3

[Julien Wajsberg [:julienw]]

From what I see, there's 2 hangs:


first (bigger) hang, I think it's when loading the web console:
* render in ConsoleOutput takes 100ms by itself already
* react does all his "magic" to really render to the DOM this render
* a 500ms "scrollToBottom" with a sync reflow
* render in ConsoleOutput takes 100ms (again)
* 80ms of react internal magic to update the tree


second hang:
* seems to be synchronized with some work in a tab, maybe it's the youtube page still logging stuff while it's loaded.

Nicolas, I believe we already have a bug about this ?

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

So, I don't reproduce the issue going on youtube, I guess those logs are caused by the extension.
There are 3712 error logged, most of them are about the deprecated caller usage.
I think we should only show them once by location.

The first 100ms is probably the initial rendering, where we only show the latest messages
I'll check if we have something for scrollToBottom, it really takes too long.

Could you also check with Nightly if you have the same result ? We are working on performances and things might be a bit better there.

Comment 5

[Johan C]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #4)
> So, I don't reproduce the issue going on youtube, 
I forgot to mention in the description that I could only reproduce the bug with Youtube's new layout/UI.
Youtube also uses some kind of ajax-framework for loading pages (https://github.com/youtube/spfjs), I know this was enabled when I reproduced the jank, but maybe it wasn't for you?

> I guess those logs are caused by the extension.
No, I don't think so, as I mentioned in the description, the extension was removed before capturing this profile.

> There are 3712 error logged, most of them are about the deprecated caller
> usage.
> I think we should only show them once by location.
> 
> The first 100ms is probably the initial rendering
I'm 99% sure that I started the profile several seconds after the page had finished loading. The jank has nothing to do with the page loading, it is constant.

> Could you also check with Nightly if you have the same result ? We are
> working on performances and things might be a bit better there.
I tried nightly now and could not reproduce it, but that could also be because it is difficult to reproduce in general.
I also tried loading my add-on to be sure it or add-on debugging being enabled wasn't causing the jank, but I still could not reproduce the it. The console spam is not there on Nightly.

Comment 6

[Brian Grinstead [:bgrins]]

FWIW there was a report of similar issues on youtube if the javascript.options.strict pref was set to true (https://bugzilla.mozilla.org/show_bug.cgi?id=1252012#c11). That particular case was fixed by Bug 1382968, but that was in the if the console was opened in a non-youtube tab while the video was playing. It still causes a huge amount of log spam if you open the console on the youtube tab with that pref flipped.

Comment 7

[Johan C]

I somehow lost track of this bug, sorry about that.

(In reply to Brian Grinstead [:bgrins] from comment #6)
> FWIW there was a report of similar issues on youtube if the
> javascript.options.strict pref was set to true
> (https://bugzilla.mozilla.org/show_bug.cgi?id=1252012#c11). That particular
> case was fixed by Bug 1382968, but that was in the if the console was opened
> in a non-youtube tab while the video was playing. It still causes a huge
> amount of log spam if you open the console on the youtube tab with that pref
> flipped.
I flipped "javascript.options.strict" to false and it appears to have fixed the jank, but I've only done limited testing with it flipped.

Comment 8

[Emily Wilson]

Attachment: wordrelahar19883820.txt

Thanks from deatemasen1983.