https://lab.hakim.se/checkwave/ is slow on nightly compared to Chrome

NEW
Unassigned

Status

()

defect
P3
normal
a year ago
a month ago

People

(Reporter: mayankleoboy1, Unassigned)

Tracking

(Depends on 1 bug, {regression})

Trunk
x86_64
Windows 10
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [gfx-noted], URL)

Attachments

(1 attachment)

(Reporter)

Description

a year ago
Posted file aboutsupport.txt
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180325220121

Steps to reproduce:

1. Create fresh profile on nightly
2. Go to https://lab.hakim.se/checkwave/




Actual results:

Page will animate
This is slow compared to Chrome

Also try other cases.
Case1: Click on a corner
Case2: Clicl on the rough center
Case3: Click on the rough center to uncheck the boxes.


Expected results:

As fast or faster than chrome

case1:click in a corner: https://perfht.ml/2pLImUD
case2: click in roughly the center: https://perfht.ml/2pGN5qz
case3: click on center to uncheck: https://perfht.ml/2pLJbgb

Depending on the action/case, I  think that more than one part of nightly show up in profiles. Case1 and Case2 look like gfx. Case3 has quite a bit of Rayon overhead.
(Reporter)

Comment 1

a year ago
ni? for the the third profile:  https://perfht.ml/2pLJbgb
Flags: needinfo?(emilio)
(Reporter)

Comment 2

a year ago
WR is smoother than non-WR.
But chrome still completes the whole animation faster.
I'll take a look at the site, but if bug 1300659 is involved it probably means the site is using a large number of timers open loop without accounting for how much work is actually occurring.  If that is the case, then it's probably wontfix.
Flags: needinfo?(bkelly)
Component: Graphics → DOM
OS: Unspecified → Windows 10
Hardware: Unspecified → x86_64
Whiteboard: [gfx-noted]
Yea, this site is doing an open loop animation with setTimeout.  See:

https://github.com/hakimel/css/blob/7074f2b27518709fe6527376689a3d5466765da2/checkwave/index.html#L63-L78

This is very similar to the open loop animation I describe in this blog post:

https://blog.wanderview.com/blog/2017/03/13/firefox-52-settimeout-changes/

It basically schedules a ton of timers at particular times.  It does not check to see if its falling behind or not.  A better way to do this would be to run a requestAnimationFrame() loop and calculate what elements should be changed on each tick based on the current time.

Note, you can partially disable bug 1300659 by increasing dom.timeout.max_consecutive_callbacks_ms.  The default is to allow setTimeouts to run consecutively up to 4 ms.  If you increase this to something like 1000ms or more, the animation appears to run faster.  Note, however, the frame-per-second drops from a worst case of ~20fps to ~10fps.  So you are trading overall animation time for janking the main thread.

A major goal of bug 1300659 was to avoid one window janking the main thread for other windows in the same process.  So I believe the fix in bug 1300659 is working as intended here.

If we want this animation to run faster as an open loop we need to speed up the painting, etc, done on each modification.  Note chrome runs the animation at full speed and without dropping fps much at all.

I'm moving bug 1300659 to a see also instead of blocking based on the above reasoning.
No longer blocks: 1300659
Flags: needinfo?(bkelly)
See Also: → 1300659
My profile doesn't look like the one from comment 1 at all unfortunately, and we're styling 6 elements according to that, so it seems that somehow the rayon threads took a long time to wake up... Not sure if it's a bug or just a scheduler issue.

About 70% of the time in my profiles is spent drawing checkboxes to a texture to send them  via WR. Not that this is a very representative test-case of any web content, but maybe something could be done there for WR?
Flags: needinfo?(emilio)
(Reporter)

Comment 7

a year ago
(In reply to Emilio Cobos Álvarez [:emilio] from comment #6)

> About 70% of the time in my profiles is spent drawing checkboxes to a
> texture to send them  via WR. Not that this is a very representative
> test-case of any web content, but maybe something could be done there for WR?

My profile was with WR disabled.
As i mentioned, enabling WR does not really improve performance
Here's a profile we gathered with WebRender enabled and changing the checkboxes to blue boxes: https://perfht.ml/2GXQP0H
The reason why AddAnimationsForProperty did appear in the profile in comment 8 is that we do inefficiently convert servo's animation value into TransformFunction when we send animations to the compositor and receive the animation on the compositor.  The inefficient stuff will be gone in bug 1457033.
Priority: -- → P3
(Reporter)

Comment 10

4 months ago
With the latest nightly, WR, and uBlock disabled: https://perfht.ml/2FaOYoT

It is much better now. In fact it is so much better, that a lot of time seems to be spent in Styles.
(Reporter)

Comment 11

4 months ago

2019-01-07T23:44:43: INFO :
2019-01-07T23:44:59: INFO : Narrowed inbound regression window from [f1ce520b, 23941690] (3 builds) to [f1ce520b, 996bf60e] (2 builds) (~1 steps left)
2019-01-07T23:44:59: DEBUG : Starting merge handling...
2019-01-07T23:44:59: DEBUG : Using url: https://hg.mozilla.org/integration/mozilla-inbound/json-pushes?changeset=996bf60e0fce90cc42e7b59201d56ba0947b8cf2&full=1
2019-01-07T23:45:01: DEBUG : Found commit message:
Bug 1415987. Use ChooseScale to choose a scale in WebRender. r=jrmuizel

2019-01-07T23:45:01: DEBUG : Did not find a branch, checking all integration branches
2019-01-07T23:45:01: INFO : The bisection is done.
2019-01-07T23:45:01: INFO : Stopped

No idea why, but bug 1415987 massively improves this page with WR enabled.

Depends on: 1415987
(Reporter)

Updated

4 months ago
Status: UNCONFIRMED → NEW
Ever confirmed: true
Component: DOM → DOM: Core & HTML
Product: Core → Core
You need to log in before you can comment on or make changes to this bug.