What is the performance bottleneck of this map's rendering?

NEW
Unassigned

Status

()

3 years ago
2 years ago

People

(Reporter: potch, Unassigned)

Tracking

({DevAdvocacy})

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [DevRel:P3], URL)

(Reporter)

Description

3 years ago
This page (https://www.jasondavies.com/maps/voronoi/airports/) is a pathological test case in SVG rendering performance. I don't expect any silver bullet performance wins, but it would be good to understand what's making this visualization render at ~2fps in Firefox. For comparison, Chrome stable on my machine renders this visualization at a steady 5-7fps. Firefox gets an average of 3, but sometimes with very long <1fps lags.
(Reporter)

Updated

3 years ago
51% Painting, 42% JS, 7% other.
Inside Painting: 88% SVG path rendering, 4.5% layer building, 4.5% DLBI, 2.3% display list construction
Inside JS: 33% setAttribute, 8% math (atan2, cos, sin, asin), 5% number-to-string conversion when .join()ing an array of numbers.
This was on OS X with gfx.content.azure.backends=cg (the default).
With gfx.content.azure.backends=skia, painting is only 40% of the profile.
(Reporter)

Comment 3

3 years ago
This is an awesome breakdown- thanks Markus!
Whiteboard: [DevRel:P3]

Updated

2 years ago
Flags: platform-rel?

Updated

2 years ago
platform-rel: --- → ?
platform-rel: ? → ---
You need to log in before you can comment on or make changes to this bug.