1698365 - https://www.digibank.co.il/ causes high CPU and power consumption

Status: NEW

(Core :: Graphics: WebRender, defect)

Description

[Amir Dagan]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:86.0) Gecko/20100101 Firefox/86.0

Steps to reproduce:

Go to https://www.digibank.co.il/
Latest FF on latest Windows 10 Pro (x64, 20H2, for Workstations)

Actual results:

CPU usage was almost 100% and power consumption very high - continuously.

Expected results:

Normal CPU and power. Loading the page in Edge resulted in normal CPU and power behaviour.

Comment 1

[Henrik Skupin [:whimboo][⌚️UTC+1]]

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:88.0) Gecko/20100101 Firefox/88.0 ID:20210312033752

I can see the same and here a profile: https://share.firefox.dev/3ctRrsH

There is an animation on that page that is the underlying reason of the high CPU load. High CPU load can only be seen on the main process, and hereby around 20 - 30% on the different rendering threads. There is also a Rayon thread that is kinda busy with WebRender related activity.

Moving to WebRender for now given that it contributes most of the load.

Markus, mind having a look?

Comment 2

[Henrik Skupin [:whimboo][⌚️UTC+1]]

The problem is actually an animated SVG. It's hard for me to extract an actual working minimized HTML given that after saving the complete web page, the animation does not run. Safari btw. also has a high CPU load but it doesn't exceed 60%, means it's 40% lower.

Should it be moved to the SVG component or kept under graphics?

Comment 3

[Nicolas Silva [:nical]]

Most of the time is spent in SVG filters.

Comment 4

[Gregory Pappas [:gregp]]

Attachment: lottie_player.html

Comment 5

[Gregory Pappas [:gregp]]

Attachment: 01 Hero Main Circles.json

Comment 6

[Gregory Pappas [:gregp]]

Attachment: 02 Hero Lines & Gradients.json

Comment 7

[Gregory Pappas [:gregp]]

Attachment: 03 Hero Changes to white.json

Comment 8

[Gregory Pappas [:gregp]]

Attachment: 04 First Black Section.json

Comment 9

[Gregory Pappas [:gregp]]

Attachment: 05 Second Black Section - Auto Crop PreComp.json

Comment 10

[Gregory Pappas [:gregp]]

Attachment: 06 Third Black Section.json

Comment 11

[Gregory Pappas [:gregp]]

(In reply to Henrik Skupin (:whimboo) [⌚️UTC+2] from comment #2)

The problem is actually an animated SVG. It's hard for me to extract an actual working minimized HTML given that after saving the complete web page, the animation does not run.

Hi Henrik! That's because the animations on this page are script-driven, using a library & format called Lottie. With enough patience, you can extract them from the page, which should help make profiling a bit easier.

Player links:
01 Hero Main Circles
02 Hero Lines & Gradients
03 Hero Changes to white
04 First Black Section
05 Second Black Section - Auto Crop PreComp
06 Third Black Section

Comment 12

[Ashley Hale [:ahale]]

It seems that https://phabricator.services.mozilla.com/D174208 will improve performance here once I get it to land, but it's not a perfect fix for performance on these Lottie animations, several are putting significant pressure on things like path rendering in software before it gets to the filters, but some are significantly faster