JointJS Performance Tips

Tips for performance improvements for usual JointJS applications.

HTML

<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.css">
<!-- JointJS Fiddle -->
<div id="perf"></div>
<div id="paper-container">
  <div id="paper-html-elements"></div>
</div>

CSS

body {
  background: white;
  color: #3c4260;
}

#paper-container {
  overflow: scroll;
  width: 600px;
  height: 500px;
  border: 2px solid #3c4260;
}

JavaScript

(function() {

  var graph = new joint.dia.Graph;
  var paper = new joint.dia.Paper({ el: $('#paper-html-elements'), width: 650, height: 400, gridSize: 1, model: graph });

// Create a custom element.
// ------------------------

  joint.shapes.html = {};
  joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
    defaults: joint.util.deepSupplement({
      type: 'html.Element',
      attrs: {
        rect: { stroke: 'none', 'fill-opacity': 0 }
      }
    }, joint.shapes.basic.Rect.prototype.defaults)
  });

// Create a custom view for that element that displays an HTML div above it.
// -------------------------------------------------------------------------

  joint.shapes.html.ElementView = joint.dia.ElementView.extend({

    template: [
      '<div class="html-element">',
      '<button class="delete">x</button>',
      '<label></label>',
      '<span></span>', '<br/>',
      '<select><option>--</option><option>one</option><option>two</option></select>',
      '<input type="text" value="I\'m HTML input" />',
      '</div>'
    ].join(''),

    initialize: function() {
      _.bindAll(this, 'updateBox');
      joint.dia.ElementView.prototype.initialize.apply(this, arguments);

      this.$box = $(_.template(this.template)());
      // Prevent paper from handling pointerdown.
      this.$box.find('input,select').on('mousedown click', function(evt) {
        evt.stopPropagation();
      });
      // This is an example of reacting on the input change and storing the input data in the cell model.
      this.$box.find('input').on('change', _.bind(function(evt) {
        this.model.set('input', $(evt.target).val());
      }, this));
      this.$box.find('select').on('change', _.bind(function(evt) {
        this.model.set('select', $(evt.target).val());
      }, this));
      this.$box.find('select').val(this.model.get('select'));
      this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
      // Update the box position whenever the...