mapbox / mapbox/mapbox-gl-draw

FPS drop during `mousemove` event on `draw_polygon` mode or `drag` event in `direct_select` mode on bigger density screens (or weaker CPUs)

Open
#1,132 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged bug
Dominant language
JavaScript
Stars
1.1k
Forks
612
Avg merge
8d 9h
Merged PRs (30d)
5

Description

### Reproduction

1. git clone https://github.com/mapbox/mapbox-gl-draw.git
2. cd mapbox-gl-draw
3. yarn install
4. yarn start & open "http://localhost:9967/debug/?access_token="

### Steps to Trigger Behavior

1. Click on `draw_polygon` mode
2. Add 2 vertexes
3. Turn on Performance recoding in DevTools
4. Mouse your mouse around a bit
5. Stop recording performance
6. See 3 out 4 frames being "Partially Presented".

#### Alternative reproduction

1. Draw polygon
2. Enter `direct_select` mode
3. Turn on Performance recoding in DevTools
4. Drag around one of the vertexes
5. Stop recording performance
6. See 3 out 4 frames being "Partially Presented".

### Conditions

This lag is hardly noticeable if you use a very fast CPU or small map (px ratio). To reproduce it more easily you can try one of these:

1. Maximise the size of the map on your 4k monitor.
2. Set Performance throttling to 4x in DevTools.
3. Turn on another heavy task like Screen Recording.
4. (bug) Could only do this on a single old i5 Windows PC with 1080p monitor. But sometimes when you tilt or zoom the map to a specific range it drops from 40-50 FPS to 10 FPS while dragging/mousemoving. The behaviour seems similar to what can be achieved while plugging in 4k monitor to this PC.

### Expected Behavior

FPS doesn't drop below 30 FPS.

### Actual Behavior

FPS drops below 10 FPS and ruins UX.

### My Theories

My first theory is that too many mouse events (or derived events like source updates) clog up the CPU. I'll try to reduce that via animationFrame API later.

Another theory is that MapboxGL can't keep up with painting and we need a better way to do it. i.e. instead of updating the whole polygon, use two ghost lines to display the delta between before/after drag (in theory you only need to paint two lines then, so it might be fast enough).

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

Reproduce the issue in the debug page using draw_polygon mouse movement and direct_select vertex dragging, then profile both cases with DevTools Performance recording under CPU throttling or a large map. Compare mouse events and derived source updates with Mapbox GL painting, and evaluate whether animationFrame-based updates or a lighter rendering approach can keep interaction above 30 FPS.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.