Pan/Zoom performance on Fullscreen is really bad

[hasanayan]

I am using react-map-gl@5.2.1. When the map is fullscreen the render is choppy when I pan or zoom. It seems the issue is related to the number of pixels to be rendered. If I open Chrome developer tools while still on fullscreen, expand its window so the map area gets narrower, it works fine.

I tried ReactMapGL on fullscreen even with the most basic setup and the issue still persists.

On the other hand, if I don't use react-map-gl and use mapbox-gl@1.6.1 fullscreen performance is flawless. Is it because react-map-gl is referencing mapbox-gl@^1.0.0 and not the latest version of it?

Is there a way to force react-map-gl to use mapbox-gl@1.6.1 ?

[Pessimistress]

What browser are you using? Which mapbox-gl version is installed?

[hasanayan]

@Pessimistress it's Chrome@latest and mapbox-gl@1.6.1

[Pessimistress]

Are you seeing the issue on this example? It is expected to be less performant in non-production mode. React's developer tools is known to impose a significant perf hit.

[yocontra]

I've been trying to track down some framerate issues as well and have had some interesting behavior. When I use a mapbox-gl map directly (for example, this one: https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/), the framerate is fine - but when using a react-map-gl (for example, this one: https://uber.github.io/react-map-gl/examples/interaction) the framerate is poor.

The react-map-gl demo (highlighted render function is mapbox-gl render()):

A mapbox-gl map (highlighted render function is mapbox-gl render()):

Our app in production (highlighted render function is mapbox-gl render()):

So to sum up, in our production app the redraw is ~50-60ms, in the react-map-gl examples it takes ~100-200ms, and mapbox-gl raw is ~3ms. This is exaggerated in my case because I run a 36 inch wide 4K monitor so it is a lot to redraw - but the difference between the two is still pretty large.

I think profiling the mapbox-gl render function itself would be fruitful - maybe react-map-gl has mapbox in a state where it's doing more work than needed?

react-map-gl@5.2.3
mapbox-gl@1.9.0

[Pessimistress]

@contra Thanks for the insight. I wonder if this is related to the throttling of updates - mapbox-gl redraws asynchronously, while react-map-gl forces redraw on every React componentDidUpdate. Just as a test, is perf improved if you call setState after requestAnimationFrame in onViewportChange?

[yocontra]

@Pessimistress Can you link the code? Not able to find it in the repo

[Pessimistress]

@contra Actually, just set ayncRender={true} on the map

[yocontra]

@Pessimistress It does alleviate it, kind of:

• Some frames are reduce to ~3ms when scrolling in/out, but most are still ~50ms to ~120ms so it has about the same choppy feel
• Causes a layer sync issue when used with deck.gl, the deck layers don't line up with the base layer while panning in and out - it has a "bouncy" effect where the deck layer is delayed from the base layer

From a production build:

[Pessimistress]

The synchronization issue is expected. I was wondering if the perf issue is caused by excessive rendering. Looks like it at least is not the only issue.

What is the difference between fullscreen and non-fullscreen? Is it just caused by mapbox trying to load too much content? What is your screen resolution?

[yocontra]

@Pessimistress Resolution is 1440h 3440w but testing is being done with the browser resized to 1/4th of the screen, just zooming in and out on NYC.

If you're curious to test it on your own system: https://nyc-ny.municipal.systems/map

Certainly possible it could just be my specific GPU configuration and screen setup causing the jank.

[dchersey]

@contra The zoom and pan on Chromium for me on your site is fine ... I'm on a MBP16 tho with decent GPU.
I notice the redraw of the edges is a little slow on browser resize; this is also true for mapbox-gl examples. Those are a bit snappier but not much.

[ryanskidmore]

@hasanayan Do you have hardware acceleration enabled in your browser? I found the performance of panning/zooming really bad while using vector maps and having hardware acceleration disabled

[SourceCipher]

@hasanayan Do you have hardware acceleration enabled in your browser? I found the performance of panning/zooming really bad while using vector maps and having hardware acceleration disabled

Exactly. I was very surprised when on my low spec laptop the maps were fast and on my high end pc it was super slow and choppy. Once I enabled hardware acceleration it was flying

[Pessimistress]

This is being addressed in v7.0. Please follow #1646