Slow Rendering for big diagrams

akhildabral · July 22, 2016, 8:27am

Hello,

I was testing the performance of the modeling framework for huge files. Opening a bpmn model with around more then 500 tasks is taking time to load and once loaded moving tasks or connections takes times to render.

The image attached shows the time it took for the “tools:state-change” event to generate. This time gradually increases as the tasks in the model are increased.

I have run 1K 5K and 10K task tests.

Also is there any way to restrict the viewport to render only the view area and perform lazy loading?

Any pointers will be really heplful.

Thanks

nikku · July 22, 2016, 11:35am

The image attached shows the time it took for the “tools:state-change” event to generate. This time gradually increases as the tasks in the model are increased.

That is the expected behavior. We did not do any optimizations here. But huge diagrams will naturally slow down importing and rendering by a fair bit. You got other cost as well though, such as the fact that you will not be able to understand these diagrams anymore beyond a certain size.

Also is there any way to restrict the viewport to render only the view area and perform lazy loading?

Nope, that is not possible right now.

We may be able to look into specific issues, if you post them. Please include the samples, the toolkit version you use and your OS / hardware configuration.

akhildabral · July 25, 2016, 3:16am

Hi Nikku,

Thanks for quick reply.

I understand this is not an issue for the basic bpmn usecase. I am trying to use it for some extensive task.
Can you give me some pointers what could be causing this issue? The issue is happning when a diagram element is dropped on the canvas.

Any module if u can point me to , where i can look into and try to do some fix.

System Config :
Camunda Modeler : v1.2.0 (build 1467721604)
Node : v4.4.7
OS : Windows 10 64bit 8gig

This is a test model i have generated to test.
500Actions_Camunda.bpmn (369.0 KB)

Thanks

akhildabral · July 26, 2016, 9:46am

Nikku, i have drilled it down to the part which is making the rendered slow.

github.com

bpmn-io/diagram-js/blob/master/lib/core/GraphicsFactory.js#L113


} else {
  svgAppend(childrenGfx, outerGfx);
}


var gfx = svgCreate('g');
svgClasses(gfx).add('djs-element');
svgClasses(gfx).add('djs-' + type);


svgAppend(outerGfx, gfx);


// create visual
var visual = svgCreate('g');
svgClasses(visual).add('djs-visual');


svgAppend(gfx, visual);


return gfx;
};


GraphicsFactory.prototype.create = function(type, element, parentIndex) {
var childrenGfx = this._getChildren(element.parent);

the forEach loop is looping through all the diagram elements. If i skip this part everything is working smooth.

But i didnt understand the implecation of that. What is this forEach loop getting used for?

Can you explain this?

nikku · July 26, 2016, 9:50am

The loop makes sure that diagram elements have their correct respective parents (i.e. you moved a task, the task has to be moved in the SVG, too).

In which phase did into the the loop? Import, update?

akhildabral · July 26, 2016, 10:05am

Its while updating. When ever a element is moved/repositioned in the canvas, its getting all the diagram elements and itterating through. Do we need update the entire model?

nikku · July 26, 2016, 11:44am

We need to pick up only the elements that changed.