2016-04-15 13 views
1

Hat jemand Vorschläge zur Verbesserung der Leistung von Rappid?JointJS/Rappid Leistungsprobleme in IE

Es muss in IE (das ist 10x langsamer als Chrome) ausgeführt werden. Das Laden eines Diagramms mit 1000 Quadraten und 1000 Anschlüssen erfolgt unter 215s.

habe ich nichts Besonderes in meinem Code, ich lade gerade die Grafik aus einer JSON-Datei:

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

Mein Papier async = true gesetzt, die einen großen Schub bietet . Das Laden von JSON scheint wesentlich schneller zu sein als das programmatische Erstellen aller Knoten.

Ich habe die Vorschläge hier ausprobiert: https://groups.google.com/forum/#!topic/jointjs/dbdOrINRG8o, aber ich konnte FastPaper überhaupt nicht in IE arbeiten.

+0

Rappid verwendet SVG-Elemente, die nie im Maßstab funktionieren werden. Zum Rendern einer großen Anzahl von Knoten versuchen Sie stattdessen eine HTML-Canvas-basierte Bibliothek wie http://gojs.net –

Antwort

0

nur sichtbare Elemente Rendering können Sie viel, helfen, aber es ist nicht kostenlos ...

graph.fromJSON(JSON.parse(input)); alle Zellen in der Grafik importiert, erkennt paper diese Änderung und beginnt mit Rendering. In diesem Moment haben Sie alle Zellen mit Positionen und Größen in der Grafik, sowie Viewport (sichtbarer Bereich). Jetzt müssen Sie Elemente filtern, die sich gerade im Darstellungsbereich befinden, und nur diese Rendern wiedergeben.

  • erhalten das Ansichtsfenster: var viewport = paperScroller.getVisibleArea()
  • Elemente in Ansichtsfenster erhalten: graph.findModelsInArea(viewport)

dann müssen Sie die renderView Methode erweitern dia.Paper und außer Kraft setzen. Es sollte so aussehen:

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; 
    }, 

});