Diagram save performance - diagram.save() takes longer each call

Question

Hi there,

I am having an issue in my app. I am having performance issues when using diagram.save() to persist the diagram. What I am seeing is that each time I call diagram.save() it takes longer than the previous call despite nothing in the diagram changing.

I have created a stackblitz to illustrate the issue. In it I just just call diagram.save() every 5 seconds and log the time each call took. It starts at around 100ms, but if you leave it running it will continually increase to many seconds. It will never stop increasing.

Thanks.
Geoff

P.S. This is what we see in the devtools performance

Untitled 2 (1) (1).jpg

It looks a little like a memory leak...

Arunkumar Manoharan · Answer

Hi Geoff,When we set preventDefaults as true, we will serialize the items
defined in the application. So, we will ignore the other diagram model JSON
property internally. While calling the diagram save method multiple times in a
setinterval, the preventDefaults method will take time. We would like to know
the usage of saving the diagram on the interval gaps. could you please share us
more details of your requirement. Based on your requirement we can be able to
proceed and serve you better.Regards,Arun Kumar.

Geoff · Answer

Hi Arun,

Thanks for getting back to me. I created this simple test case to recreate a performance issue we are seeing when saveDiagram is called and it takes longer each time it is called. It seems to produce a memory leak.

I see the same behaviour if I change the setInterval to 30 seconds (it just takes longer to see the impact).

this.intervalRef2 = setInterval(() => {
      this.saveDiagramData();
    }, 30000);

We call this in our real app to export the diagram data so a user can go back to a previous version. We don't use setInterval in our real app. There is an observable subscription that triggers it under certain conditions.

Here is the same test case running every 30000ms.

Angular is running in development mode. Call enableProdMode() to enable production mode.
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 129
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 149
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 172
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 182
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 243
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 208
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 300
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 288
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 318
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 376
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 368
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 431
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 414
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 391
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 460
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 475
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 496
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 538
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 521
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 578
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 570
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 638
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 665
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 679
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 661
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 735
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 709
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 770
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 800
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 822
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 836
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 933
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 945
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 929
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 939
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 979
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 963
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 1028
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 1046
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 1087
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 1096
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 1094
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 1119
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 1182
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 1167
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 1220
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 1203
preview-ee2d89a03f5c.js:2 saveDiagramDataWithPreventDefaults : 1280
preview-ee2d89a03f5c.js:2 saveDiagramDataWithNoSerialisationSettings : 1282

As you can see the duration increases each time although the diagram has not changed. In a few calls it has increased tenfold.

Let me know if there is anything else I can provide

Regards,
Geoff

As you can see the duration increases each time although the diagram has not changed.  In a few calls it has increased tenfold.Let me know if there is anything else I can provide Regards, Geoff

Arunkumar Manoharan · Answer

Hi Geoff,

We will validate and update you more details within two business days.RegardsArun Kumar.

Shyam G · Answer

Hi Geoff,We need some more time to validate the issue and will provide you with more details on 6th April, 2022.Regards,Shyam G

Shyam G · Answer

Hi Geoff,We have checked the memory leak for saveDiagram method in
the browser and it takes some time to clear the memory. So, we have modified
your sample in which we have saved the diagram every 50s. please refer to the
modified sample and the screenshot of memory log.Sample: https://stackblitz.com/edit/angular-1aoasb-ecycb7?file=app.component.tsScreenshot:Regards,Shyam G

Geoff · Answer

Hi Shyam,

Thanks for looking into this. 50 seconds is a very long time though :-)

Is it possible for us to serialise the diagram off the main thread (in a webworker), so that the UI remains responsive whilst the save is happening?

Regards,
Geoff

Vijayarasan Sivanandham · Answer

Hi Geoff,We have checked memory leak for saveDiagram method with 10s
and the memory is disposed properly. Could you please check in the below
sample.Sample: https://stackblitz.com/edit/angular-1aoasb-azbmpx?file=app.component.tsScreenshot:If you need to use web worker in angular, please refer to
the below link.https://angular.io/guide/web-workerRegards,Shyam G

Geoff · Answer

Looks like it becomes an issue when you set this property

 this.diagram.serializationSettings.preventDefaults = true;

Thanks for the info about the webworkers... The question is more can we serialise a diagram in a webworker, rather than how do they work...

Cheers, Geoff

Shyam G · Answer

Hi Geoff,We will validate your issue and update you with more details on 12th April, 2022.Regards,Shyam G

Shyam G · Answer

Hi Geoff,We have logged “Memory leak occurs in saveDiagram method”
as a defect. The fix for this issue will be available in our weekly patch
release 20th April, 2022. You
can track the status of the bug from the below feedback link.https://www.syncfusion.com/feedback/34145/memory-leak-occurs-in-savediagram-methodRegards,Shyam G

Geoff · Answer

Many thanks Shyam!

Aravind Ravi · Answer

Hi Geoff,Most welcome. As promised earlier, we will fix this issue
and provide the patch on 20th April, 2022 weekly patch release.   https://www.syncfusion.com/feedback/34145/memory-leak-occurs-in-savediagram-methodRegardsAravind Ravi

Shyam G · Answer

Hi Geoff,We have created a new support ticket under your account. Please log into your account to view the support ticket.Regards,Shyam G