mapbox / mapbox/mapbox-gl-js

updatePaintArrays got really slow on geojson with lots of paint properties

Open
#13,674 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug :lady_beetle: performance :zap:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### mapbox-gl-js version

v3.21, v3.24.0

### Browser and version

firebox 151.0.2

### Expected behavior

Hi.
I have a geojson Line layer with many paint properties. (line-color, line-opacity, line-width, line-blur). There are also expression on those ex:

'line-color': ['case', ['boolean', ['feature-state', 'select'], false], '#87FFF3',
['case', ['has', 'route_color'],
['concat', '#', ['get', 'route_color']],'#4b88fa']],

when i update a paint property it's now really slow
map.setPaintProperty('my-layer', 'line-opacity', 0.5);

It now take 3600ms while it took 400ms before v3.21.

The function "updatePaintArrays" looks to be the problem.

I tested i bit and The slowdown seems to only happen when there are expressions in the paint properties. Like mapbox now have to reevaluate every expression on every geojson features when I change the opacity.

here are screenshots of the firefox's performance flameGraphs. issue is still present on v3.24.0
v3.21
Image

v.3.20
Image

thank you!

### Actual behavior

_No response_

### Link to the demonstration

_No response_

### Steps to trigger the unexpected behavior

_No response_

### Relevant log output

```shell

```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the updatePaintArrays path called by map.setPaintProperty, then compare its behavior between v3.20 and v3.21 using a GeoJSON Line layer with several expression-based paint properties. Profile the expression work during an opacity update; done means the regression is explained and the update no longer incurs the reported multi-second slowdown.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
computer-graphics, frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.