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

Revision 3 of this benchmark created by Paul on


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
TestOps/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
  • Revision 3: published by Paul on