Let's talk about performance

[maertu]

Hi guys,

I am currently working on a project which should handle about 400-500 nodes with the goal to reach at least 30 FPS.
I did some performance measuring with google chrome profiler. Here is an example with 286 Nodes and 288 Edges, no styling and no layout applied.

As you can see the whole render calculation takes about 50ms. With this I would only get 20 FPS at max. Considering that layouting will at least take up 5ms and using styles may also reduce performance I guess it seems not possible to get to 30 FPS. Do you agree so far?

If yes, I have a few questions to the veterans.

1. Is the renderFn already optimized and it would be a waste of time to try to optimize it further? According to my measurements I would likely need double the performance.
2. Would it benefit from writing the renderer in WebGL (f.e. Pixi.js). Or would that only speed up the paint part (see green bar in chrome-profiler)
3. Any other recommendations? May use other library for such cases like sigma.js?

Thanks in advance.

[maxkfranz]

Performance is difficult to measure accurately. For instance, the Chromium debugger slows things down significantly when it's open. Another example: Rendering is a bit slower when initial caches are being built up, and subsequent frames are faster.

If yes, I have a few questions to the veterans.

1. Is the renderFn already optimized

Yes

and it would be a waste of time to try to optimize it further?

Improvements are always welcome

According to my measurements I would likely need double the performance.
2. Would it benefit from writing the renderer in WebGL (f.e. Pixi.js). Or would that only speed up the paint part (see green bar in chrome-profiler)

WebGL could increase blitting performance from the caches, and it could help with rendering edge lines. Rendering text with WebGL generally isn't very good. You'd probably want to use a mixed approach with both canvas and WebGL.

3. Any other recommendations? May use other library for such cases like sigma.js?

There's a section in the documentation devoted to performance with tips: https://js.cytoscape.org/#performance

Generally, the more features a library supports, the more expensive it is. Generally, people prioritise rich interactive features over raw performance, beyond a certain point [1].

Thanks in advance.

[1] https://npmtrends.com/cytoscape-vs-sigma