jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

Many Flex-cols vs table-display with max-height (v3)

Revision 3 of this benchmark created by Paul on November 20, 2015

Preparation HTML

<style>
    #flex-container {
      display: flex;
    }
    #flex-container .row {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
    }
    #flex-container .gridcell {
      display: flex;
      flex-direction: row;
      flex-shrink: 0;
      justify-content: flex-start;
    }
    #flex-container .col {
      display: flex;
      flex-grow: 1;
      flex-shrink: 0;
      flex-direction: column;
    }

    #table-container {
      display: table;
    }
    #table-container .row {
      display: table-cell;
    }
    #table-container .gridcell {
      display: table-row;
    }
    #table-container .col {
      display: table-cell;
    }
    </style>
    <div id="flex-container">
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
    </div>

    <div id="table-container">
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
      <div class="row"><div class="gridcell"><div class="col"></div><div class="col"></div></div></div>
    </div>

Setup

function replaceHTML(containerId) {
        var parent = document.getElementById(containerId);
        var child = parent.firstChild;
        parent.removeChild(child);
        parent.appendChild(child);
        child.offsetTop;
        child.clientHeight;
      }

Test runner

Ready to run.

Testing in
Test		Ops/sec
Replace flex containers	`replaceHTML('flex-container');`	ready
Replace table containers	`replaceHTML('table-container');`	ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

Revision 1: published by Kenneth on November 20, 2015
Revision 3: published by Paul on November 20, 2015