1288183 - D3.js demo is more janky in Firefox than in competing browsers

Status: RESOLVED WORKSFORME

(Core :: Graphics: WebRender, defect, P3)

Description

[Mike Conley (:mconley) (:⚙️)]

Here's the demo: http://bl.ocks.org/mbostock/1386444

There's a bit of jank running this. Definitely not as smooth as other browsers.

Here's a profile I gathered: https://cleopatra.io/#report=2104e9fca8334e3334dc310239b22ab43f39c56d&selection=0,1299,1300,1301,1302,931,1303,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,445,446,447,448,449,530,531,532,1304,533,534,88,89,90,91,92,93

We seem to be spending the vast majority of our time inside nsPresShell::Paint, so putting this under Core :: Graphics as a first guess.

Comment 1

[Peter Chang[:pchang]]

The interval between every composition is not always consistent in the following range, I guess that's why we saw jank in FF. In content process, it was quite busy for style-change/process displayitems/rasterization because there were many rotated cubes animation.

https://cleopatra.io/#report=2104e9fca8334e3334dc310239b22ab43f39c56d&filter=%5B%7B%22type%22%3A%22RangeSampleFilter%22,%22start%22%3A266851,%22end%22%3A268004%7D,%7B%22type%22%3A%22RangeSampleFilter%22,%22start%22%3A267037,%22end%22%3A267231%7D%5D

Comment 2

[Benoit Girard (:BenWa)]

Style seems ok, but we're spending too much time in display list building/layer tree/rasterizing. There's no obvious bottleneck here.

I see layers being activated and de-activated on this page. We're not breaking down the page well.

Comment 3

[Benoit Girard (:BenWa)]

This is part of the problem:
https://dxr.mozilla.org/mozilla-central/rev/4c05938a64a7fde3ac2d7f4493aee1c5f2ad8a0a/layout/base/nsDisplayList.cpp#6064

We're forcing the layer on and off because of the 3d transform. I've forced the layers to be inactive and the page renders fine.

Comment 4

[Mayank Bansal]

Latest Profile: https://share.firefox.dev/3PtSN84

Comment 5

[Glenn Watson [:gw]]

This seems to run quite well now.