1663360 - Choppy Animation of Pie and Line chart during page load

Status: UNCONFIRMED

(Core :: JavaScript Engine, defect, P3)

Description

[bull500]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:82.0) Gecko/20100101 Firefox/82.0

Steps to reproduce:

VIsit https://hbayindir.github.io/covid-19-turkey/

Actual results:

During page load, the animation of line & pie charts is choppy as if frames are dropped.
Also while hovering on the pie chart a pop-up tool tip appears. It lags and follows the mouse as cross - browser testing but in Firefox it seems there is some choppiness to the following movement as well

Expected results:

Line and Pie chart animation should be smooth and visually pleasing

Comment 1

[bull500]

Correction:
The tool tip lag happens on the line charts as well

Comment 2

[Denis Palmeiro [:denispal]]

I can reproduce this on windows. Here are profiles for the 2 issues:

Tool tip delay: https://share.firefox.dev/35cMvGk
Page load: https://share.firefox.dev/3jWIb23

Comment 3

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

Animation frame callbacks at the end of the profile take lots of time.

Comment 4

[Bas Schouten (:bas.schouten)]

https://share.firefox.dev/2RsrWO6

This is one of the animation frame callbacks, we take a very long time, a lot of it spent inside 'concat', the same callback in Chrome takes 5ms.

Comment 5

[Ted Campbell [:tcampbell]]

Iain can you take a look at what is up with self-hosted concat being slow? The "Page load" link in Comment 2 has a long event handler times stuck in concat. Does Warp have any impact here?

Comment 6

[Iain Ireland [:iain]]

Good news! I think Warp fixes this.

In the marker chart in the profiles above, if you filter for "self-hosted:590" (ArrayConcat), there's an endless stream of bailouts (BailoutKind::ObjectIdentityOrTypeGuard) and invalidations. With Warp enabled, those bailouts and invalidations all disappear, and the page is visually quite smooth, at least on my machine.

bull500: In about:config, can you please set javascript.options.warp to true, restart Firefox, visit the page again, and see if that helps?

Comment 7

[bull500]

(In reply to Iain Ireland [:iain] from comment #6)

Good news! I think Warp fixes this.

In the marker chart in the profiles above, if you filter for "self-hosted:590" (ArrayConcat), there's an endless stream of bailouts (BailoutKind::ObjectIdentityOrTypeGuard) and invalidations. With Warp enabled, those bailouts and invalidations all disappear, and the page is visually quite smooth, at least on my machine.

bull500: In about:config, can you please set javascript.options.warp to true, restart Firefox, visit the page again, and see if that helps?

Thanks for the setting :iain
While this does improve the situation, its far from perfect.

The tool tip content updates as the user moves the mouse but there is still much delay in the tool tip box following in the mouse. It remains static, updates the content in the box and finally moves.

The animation of loading of the line and pie chart still feels much more smoother in chrome than firefox even with warp enabled. Its still feels as if the pie chart is loading 20 % chunks at a time

Also whats this magic thing called Warp and when it gonna come on by default?

Comment 8

[Iain Ireland [:iain]]

WarpMonkey is our new optimizing JIT, replacing IonMonkey. Right now we're tentatively targeting FF83 to turn it on by default.

Comparing against Chrome, I agree that we could be smoother. The hot spot here is ArrayConcat. As far as I can tell, we're working entirely with packed arrays, so I believe we're hitting the fast path. However, we call ArrayConcat a lot. With extraneous details removed, the code in question is roughly:

function parse(array) {
    return array.reduce((t,e) => { return [].concat.call(t,e); }, []);
}
let input = [];
for (let i = 0; i < 176; i++) {
   input.push(["M", 1, 2]);
}
for (let i = 0; i < 500; i++) {
   parse(input);
}

Over the course of page load, this works out to almost 100K calls to ArrayConcat, and a lot of buffer reallocations.

(Fun note: the reduce/concat in parse is a 30x slower way of writing array.flatten(). It comes from a vendored copy of svg.js. The upstream code in svg.js was recently rewritten for what appear to be unrelated reasons.)

There might be opportunities to make ArrayConcat faster, but they'll probably involve looking at the generated code.