Zoom in/out performance issues with a huge number of marker/polyline

[P-Zenker]

Hey,

i've updated from mapbox-gl-js version v0.38.0 to v0.39.1

I have a setup with around 450 nodes (marker) and 1100 edges (polyline):

Expected Behavior

If I zoom in and out I expect a smooth and fast rendering & animation like in v0.38.0

Actual Behavior

There are huge performance issues. It takes around 1 second to compute the very jerky result. Tested with Apple Safari (Version 10.1.1 (12603.2.4)) and Google Chrome (59.0.3071.115 64-Bit).

To clarify my issue, I've made two Quicktime screen videos (mov format):
v0.38.0 vs v0.39.1.zip

With only 30 nodes and edges there are no visible performance issues.

Best regards,
Patrick

[mollymerp]

Hi @PatrickZenker – thanks for reporting this issue. Would you be able to provide a minimal, self-contained jsfiddle/jsbin that illustrates the regression?

[P-Zenker]

Hey, sorry for my late response.

I've made a jsfiddle but the position of the markers are incorrect: https://jsfiddle.net/kozLk0fn/

Therefore you can view and copy the resources from here:
https://www.catchup-apps.com/jsfiddle/mb_issue_5041_v38.0.html
https://www.catchup-apps.com/jsfiddle/mb_issue_5041_v39.1.html

The line layers are in this very simple example (no logic from us) comment out because of performance issues.

[jfirebaugh]

Thanks @P-Zenker, we'll check it out.

[jfirebaugh]

I don't see any lines in either example. Are they correct?

Is there a reason you're creating a separate source and line layer for each individual feature? That's unlikely to perform well under any circumstances. Try creating a single source and layer instead.

[P-Zenker]

The lines are not important to show the error because the marker themselves have a performance issue if you compare the two versions.

[jfirebaugh]

Ah, ok:

There was a forced reflow caused by #4751. This has been fixed for the next release by #5139.