Benchmark

getElements()

by Roman Bruckner

HTML

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.3.0/joint.css" />
  </head>

  <body>
    <!-- content -->
    <ul id='cycleResults'>

    </ul>
    <div id="result">

    </div>
    <br>
    <button id="btn">
      Run Tests
    </button>
    
    <div id="paper"></div>
    
    <!-- dependencies -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.3.0/joint.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>

  </body>

</html>

JavaScript

var graph = new joint.dia.Graph({}, {
    cellNamespace: joint.shapes
});

const paper = new joint.dia.Paper({
    el: document.getElementById('paper'),
    width: 800,
    height: 900,
    model: graph,
    async: true,
    frozen: true,
    sorting: joint.dia.Paper.sorting.NONE,
    defaultConnectionPoint: {
        name: 'boundary'
    },
    cellViewNamespace: joint.shapes
});


for (var i = 0; i < 1000; i++) {
	graph.addCell({ z: i, type: 'standard.Rectangle' });
  graph.addCell({ z: i, type: 'standard.Link' });
}


function test1()
{
   Object.keys(graph._nodes).map(id => graph.getCell(id));
}

function test2()
{
   graph.get('cells').filter(cell => cell.isElement());
}

function test3() {
    graph.getCells().filter(cell => cell.isElement());
}

var cycleResults = document.getElementById('cycleResults');
var result = document.getElementById('result');
var btn = document.getElementById('btn');

// BENCHMARK ====================
btn.onclick = function runTests(){

  btn.setAttribute('disable', true);
	cycleResults.innerHTML = '';
  result.textContent = 'Tests running...';
  
  var suite = new Benchmark.Suite;

  // add tests
  suite
  .add('test1', test1)
  .add('test2', test2)
  .add('test3', test3)
  // add listeners
  .on('cycle', function(event) {
    var result = document.createElement('li');
    result.textContent = String(event.target);
    
    document.getElementById('cycleResults')
    	.appendChild(result);
  })
  .on('complete', function() {
    result.textContent = 'Fastest is ' + this.filter('fastest').pluck('name');
    btn.setAttribute('disable', false);
  })
  // run async
  .run({ 'async': true });
};