JSFiddle - React, Tailwind, and code Playground

by ShukantPal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.4/benchmark.js"></script>
<script src="https://unpkg.com/html-console-output"></script>
<!DOCTYPE html>
<html>

  <head>
    <title>Bounds speedup benchmark</title>
  </head>

  <body>
    <script type="text/javascript" src="https://pixijs.download/v5.2.1/pixi.js"></script>
    <script>
      window.PIXI_DEV = window.PIXI;
      window.PIXI = null;
    </script>
    <script src="https://pixijs.download/dev-bounds-propagation/pixi.js"></script>
    <script>
      window.PIXI_FIX = window.PIXI;
      window.PIXI = null;

    </script>
  </body>

</html>

JavaScript

function testAfter() {
  var PIXI = window.PIXI_FIX;

  var root = new PIXI.Container();

  for (var i = 0; i < 16; i++) {
    var p = root.addChild(new PIXI.Container());

    for (var j = 0; j < 16; j++) {
      var c = p.addChild(new PIXI.Container());

      for (var k = 0; k < 16; k++) {
        c.addChild(new PIXI.Container());
      }
    }
  }

  for (var z = 0; z < 128; z++) {
    root.getLocalBounds();
  }
}

function testBefore() {
  var PIXI = window.PIXI_DEV;

  var root = new PIXI.Container();

  for (var i = 0; i < 16; i++) {
    var p = root.addChild(new PIXI.Container());

    for (var j = 0; j < 16; j++) {
      var c = p.addChild(new PIXI.Container());

      for (var k = 0; k < 16; k++) {
        c.addChild(new PIXI.Container());
      }
    }
  }

  for (var z = 0; z < 128; z++) {
    root.getLocalBounds();
  }
}

var suite = new Benchmark.Suite();

suite.add('testBefore', testBefore);
suite.add('testAfter', testAfter);
suite.on('cycle', function(event) {
    console.log(String(event.target));
  })
  .on('complete', function() {
    console.log('Fastest is ' + this.filter('fastest').map('name'));
  })

suite.run({
  async: false
})