1308701 - Very slow scrolling the leaderboard of www.europeantour.com

Status: RESOLVED WORKSFORME

(Core :: Layout, defect)

Description

[vincent_dhaene]

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
Build ID: 20161006105459

Steps to reproduce:

- Open the leaderboard of http://www.europeantour.com, e.g. http://www.europeantour.com/europeantour/season=2016/tournamentid=2016078/leaderboard/index.html#/leaderboard
- Scroll using mousewheel or scrollbars


Actual results:

Scrolling is very slow and response time bad

Comment 1

[Olli Pettay [:smaug][[e-mail]]]

Indeed, it is bad on non-e10s, and with e10s there is lots of checkerboarding (but scrolling is very smooth).
The page is obviously doing something silly by causing lots of re-creation of layout objects.
Scrolling is horrible also on other browsers: Chrome on linux is checkerboarding a lot, and scrolling Chrome on Windows is somehow odd, slow but no checkerboarding.
Edge is doing quite well.

Jet, could someone from layout team perhaps profile this a bit. It is a bug in the web site, sure, but maybe there are also things to improve in Gecko.

Comment 2

[Jet Villegas (inactive)]

I boiled these down to two test cases to isolate the problem:
http://media.junglecode.net/test/1308701/test_slow.html#/leaderboard
http://media.junglecode.net/test/1308701/test_fast.html#/leaderboard

The only difference between these two cases is a single line commented in a JS file:
http://media.junglecode.net/test/1308701/asset_files/leaderboardBundle_slow.js
http://media.junglecode.net/test/1308701/asset_files/leaderboardBundle_fast.js

Look for "// xxx jet: comment this line out to speed this up!" to find the relevant line.

The root cause is that the following call is slower in Gecko than in other browsers:
$(ele).offset().top

Smells like a dupe, but I haven't found one yet. 

Cam: have you seen this one before?

Comment 3

[Jet Villegas (inactive)]

BTW, jquery $Element.offset() depends on Element::GetBoundingClientRect() which does a full Layout flush in Gecko. Blink/Webkit doesn't appear to do a Layout/Style flush for that call:

https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/dom/Element.cpp?q=GetBoundingClientRect&sq=package:chromium&l=1131

Speeding up GetBoundingClientRect() would be great, but I'm not sure what we'll break by suppressing the reflow in this call.

Comment 4

[Jet Villegas (inactive)]

Attachment: Tests the effect of a full Layout flush vs. not

Comment 5

[Jet Villegas (inactive)]

(In reply to Jet Villegas (:jet) from comment #3)
> Speeding up GetBoundingClientRect() would be great, but I'm not sure what
> we'll break by suppressing the reflow in this call.

It turns out we may break a fair bit. The ASSERTs in the patch in comment 4 is firing quite a bit.

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to Jet Villegas (:jet) from comment #3)
> which does a full Layout flush in Gecko. Blink/Webkit doesn't appear to do a
> Layout/Style flush for that call:
> 
> https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/dom/
> Element.cpp?q=GetBoundingClientRect&sq=package:chromium&l=1131

Yes it does.  One of the first things in that function is a call to clientQuads, whose first line is:
  document().updateStyleAndLayoutIgnorePendingStylesheetsForNode(this);
which sure sounds like the same thing.

> Speeding up GetBoundingClientRect() would be great, but I'm not sure what
> we'll break by suppressing the reflow in this call.

I think the key question here is why the work that the flush triggers is slower.

Comment 7

[Jet Villegas (inactive)]

(In reply to David Baron :dbaron: ⌚️UTC-7 from comment #6)
> I think the key question here is why the work that the flush triggers is
> slower.

I took another look here and jquery's outerHeight() is even slower after the GetBoundingClientRect() flush happens. 

I updated my comments in the affected JS file:
http://media.junglecode.net/test/1308701/asset_files/leaderboardBundle_slow.js

This appears to be a known issue in the version of jquery used on this site:
https://bugs.jquery.com/ticket/12689

The site would do well to cache the results of outerHeight() outside of the scrolling loop, but we may still be able to speed that up in Gecko.

Comment 8

[Cameron McCormack (:heycam)]

Page performance looks good for me these days.