1

Does anyone have suggestions for improving the performance of Rappid?

It has to run in IE (which is performing 10x slower than Chrome). Loading a graph with 1000 squares and 1000 connectors is taking 215s.

I don't have anything fancy in my code, I'm just loading the graph from a JSON file:

graph.fromJSON(JSON.parse(input));

My paper is set to async = true, which offers a large boost. And loading from JSON seems to be significantly faster than creating all the nodes programmatically.

I've tried the suggestions here: https://groups.google.com/forum/#!topic/jointjs/dbdOrINRG8o but I couldn't get FastPaper working in IE at all.

Timothy
  • 31
  • 2
  • Rappid uses SVG elements which will never be performant at scale. To render a lot of nodes try an HTML canvas-based library instead like http://gojs.net – Simon Sarris May 10 '16 at 20:12

1 Answers1

1

rendering only visible elements can help you a lot, but it's not for free...

graph.fromJSON(JSON.parse(input)); imports all cells into the graph, paper detects this change and starts with rendering. In this moment you have all cells with positions and sizes in graph, as well as viewport(visible area). Now you need to to filter elements which are currently in the viewport and renderd just them.

  • get the viewport: var viewport = paperScroller.getVisibleArea()
  • get elements in viewport: graph.findModelsInArea(viewport)

then, you need to extend dia.Paper and override the renderView method. It should look like this: 

joint.dia.PartialRenderPaper = joint.dia.Paper.extend({

    isVisible: function(cell) { 
        // detection logic
    },
    renderView: function(cell) {


        if (this.isVisible(cell) || cell.isLink()) {

             return joint.dia.Paper.prototype.renderView.apply(this, arguments);
        }

        return null;
    },

});
vt.
  • 1,398
  • 7
  • 15