Performance

Tips for performance improvements for usual JointJS applications.

by Roman Bruckner

HTML

<html>

  <body>
    <!-- content -->


    <div id="canvas"></div>
    <div id="perf"></div>

    <!-- dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/@joint/[email protected]/dist/joint.min.js"></script>

  </body>

</html>

CSS

#perf {
  position: fixed;
  top: 10px;
  left: 10px;
  background: lightgray;
}

JavaScript

// JointJS Performance tips

// Overall goals
// -------------
// 1. reduce number of DOM elements (See async.html demo)
// 2. avoid asking the browser for element bounding boxes as much as possible

// Number of elements 0 - ?
var COUNT = 5000;
var RELATIONS = 1;
// Async rendering true/false
// true: does not block the UI
var ASYNC = true;

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
  el: document.getElementById('canvas'),
  model: graph,
  async: ASYNC,
  frozen: true,
  // Avoid using joint.dia.Paper.sorting.EXACT
  // It's extremely slow for large amounts of elements.
  // There is no big difference between sorting APPROX and NONE in terms of performance.
  sorting: joint.dia.Paper.sorting.APPROX,
  // To avoid measuring of the SVGElement magnet size, you can calculate
  // the anchor point for the links manually.
/*   defaultConnectionPoint: {
    name: 'anchor'
  },
   *//*   defaultAnchor: (view, _0, _1, _2, endType) => {
    const bbox = view.model.getBBox();
    return endType === 'source' ? bbox.bottomMiddle() : bbox.topMiddle();
  }, */
  defaultRouter: { name: 'orthogonal' }
});

var Shape = joint.shapes.standard.Rectangle;
var Link = joint.shapes.standard.Link;

var el = new Shape({ size: { width: 300, height: 200 }});
var l = new Link();

var cells = [];

var startTime = new Date();

function showResult() {
  var duration = (new Date() - startTime) / 1000;
  document.getElementById('perf').textContent = (COUNT + ' elements and ' + COUNT / 2 * RELATIONS + ' links rendered in ' + duration + 's');
}

// Prefer resetCells() over `addCells()` to add elements in bulk.
// SVG as oppose to HTML does not know `z-index` attribute.
// The "z" coordinate is determined by the order of the sibling elements. The JointJS
// paper makes sure the DOM elements are sorted based on the "z" stored on each element model.
/* graph.resetCells(cells, {
//  sort: false // do not sort cells in the graph
});

paper.scale(0.2);
paper.fitToContent({...