featureLayer rendering performance

[jduncalf]

Describe the bug

Hi, i've noticed that any attempt to style a feature layer, results in a massive overall map rendering performance hit. Earlier versions of esri-leaflet.js, e.g. 2.5.3 work as expected.

Thanks.

Reproduction

Here's a simple code snippet:

var vGrassStyle = { "color": "#00ff00" };

var vLayer = L.esri.featureLayer({ url: 'https://services6.arcgis.com/xjnLSXTALbkc5QYN/arcgis/rest/services/Grass_Cutting/FeatureServer/0', style: vGrassStyle });

Logs

No response

System Info

Leaflet 1.8.0, ESRI 3.0.8

Additional Information

No response

[gavinr]

Hi, thank you for the report. I investigated this, and I think it started happening in v3.0.5, where in PR #1304 @patrickarlt predicted there may be performance issues. I think this issue you're reporting is related to those potential performance issues manifesting themselves.

I have created a replication case to demonstrate:

1. Browse to https://jsbin.com/soyicup/1/edit?html,output (esri-leaflet v3.0.4)
2. click "zoom out" button 2 times
   • Expected: zoom out works as expected
   • Actual: zoom out works as expected ✅

--

1. Browse to https://jsbin.com/geceqan/1/edit?html,output (Esri-leaflet v3.0.5)
2. click "zoom out" button 2 times
   • Expected: zoom out works as expected (similar to above)
   • Actual: browser crashes ❌

[dandormont]

I have a similar example in case that is helpful, https://codepen.io/dandormont-the-decoder/pen/RwyVOxQ It shows up ok initially but once you start to zoom in the browser hangs. Works fine on esri-leaflet 3.0.1 which is what I happen to be using in production. Thanks.

[patrickarlt]

Going to investigate this more. https://jsbin.com/geceqan/1/edit?html,output is particularly concerning because there aren't that many features and it is using an object not a function.