improve rendering performance

[fidransky]

When more than a few nodes are loaded, app gets slow and not very interactive. The issue is that there is a lot of DOM elements that need to be rerendered often resulting in poor performance.

Consider removing/disabling of some of the nice-to-have-but-expendable features such as:

• white shadow of edges
• redrawing edges on every sidebar scroll
• preserving edges of excluded nodes in viewport
• ...

The features should be either commented out or conditionally disabled (e.g. if node count > 100).

[pbrada]

Can we measure/estimate the impact of these suggested features on performance? Eg. how many DOM elements (% of total) they create? Or more generally, could we try to identify where the main bottlenecks are? (The suggestions are understandable but switching them off would impact usability, so it's not a too clear-cut situation.)

I would certainly prefer to approach the solution not by commenting out, but to either disable conditionally or by setting an option in the app.

[fidransky]

There is some profiler available in Chrome DevTools which can measure at least number of DOM nodes and memory usage. Need to explore all of its features.

Generally, the more nodes/edges in graph, the worse gets performance. Any improvement in the area of rendering a single node/edge should have big impact.

I need to further elaborate this issue but overall, I agree that disabling the features (in any way) is preferable solution over commenting them out.

[fidransky]

Some resources on performance analysis:

• https://www.youtube.com/watch?v=TAyp19NBLdA
• https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
• https://gist.github.com/paulirish/5d52fb081b3570c81e3a