Rendering many graphics to a SceneView causes entire browser to stutter

avecchi

Hello,

I am attempting to render around ~500 graphics at once to a SceneView using:

 

const view = new SceneView({...})
const graphics = [...arrayOfGraphics]
view.set('graphics', graphics)

 

But whenever I do this, the entire browser hangs for a bit as you can see in the GIF below. I have an animated square in the top right corner to show that the stutter is affecting elements outside of the map container div.

Is there a better way for me to render a large amount of graphics to a SceneView at once? If there is no way to speed this up, is there at least a way to make it just halt the map and not halt the entire page?

Thank you

RalucaNicola1

hey, an improvement would be to define the symbols using the class and not by autocasting. When using a class it will reuse the symbol instance for each graphic and when you use autocasting it will create a new symbol and that might lead to poor performance. I updated your app here: https://codepen.io/ralucanicola/pen/wveGxQm?editors=1000 can you try it out and let us know how it performs for you?