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

Table vs Div rendering (v9)

Revision 9 of this benchmark created on March 2, 2015

Description

Testing rendering performance when changing a table cell vs a div.

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="table-target">
<table class="hours">
  <tbody>
    <tr class="text header">
      <th></th>
      <th colspan="4">
        <span class="offset15">5 am</span>
      </th>
      <th colspan="4">
        <span class="offset15">6 am</span>
      </th>
      <th colspan="4">
        <span class="offset15">7 am</span>
      </th>
      <th colspan="4">
        <span class="offset15">8 am</span>
      </th>
      <th colspan="4">
        <span class="offset15">9 am</span>
      </th>
      <th colspan="4">
        <span class="offset15">10 am</span>
      </th>
      <th colspan="4">
        <span class="offset15">11 am</span>
      </th>
      <th colspan="4">
        <span class="offset15">12 pm</span>
      </th>
      <th colspan="4">
        <span class="offset15">1 pm</span>
      </th>
      <th colspan="4">
        <span class="offset15">2 pm</span>
      </th>
      <th colspan="4">
        <span class="offset15">3 pm</span>
      </th>
      <th colspan="4">
        <span class="offset15">4 pm</span>
      </th>
    </tr>
    <tr>
      <td class="text">
        Tue, Nov 20
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data">
        <div class="active-cell">
          <div class="hidden" class="data"></div>
        </div>
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Wed, Nov 21
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Thu, Nov 22
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Fri, Nov 23
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Sat, Nov 24
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Sun, Nov 25
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Mon, Nov 26
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Tue, Nov 27
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Wed, Nov 28
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Thu, Nov 29
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Fri, Nov 30
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Sat, Dec 1
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Sun, Dec 2
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Mon, Dec 3
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Tue, Dec 4
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
    <tr>
      <td class="text">
        Wed, Dec 5
      </td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
    </tr>
  </tbody>
</table>
</div>


<div id="div-target">
    <div class="row" class="text header">
      <div></div>
      <div>
        <span class="offset15">5 am</span>
      </div>
      <div>
        <span class="offset15">6 am</span>
      </div>
      <div>
        <span class="offset15">7 am</span>
      </div>
      <div>
        <span class="offset15">8 am</span>
      </div>
      <div>
        <span class="offset15">9 am</span>
      </div>
      <div>
        <span class="offset15">10 am</span>
      </div>
      <div>
        <span class="offset15">11 am</span>
      </div>
      <div>
        <span class="offset15">12 pm</span>
      </div>
      <div>
        <span class="offset15">1 pm</span>
      </div>
      <div>
        <span class="offset15">2 pm</span>
      </div>
      <div>
        <span class="offset15">3 pm</span>
      </div>
      <div>
        <span class="offset15">4 pm</span>
      </div>
    </div>
    <div class="row">
      <div class="text">
        Tue, Nov 20
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data">
        <div class="active-cell">
          <div class="hidden" class="data"></div>
        </div>
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Wed, Nov 21
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Thu, Nov 22
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Fri, Nov 23
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Sat, Nov 24
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Sun, Nov 25
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Mon, Nov 26
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Tue, Nov 27
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Wed, Nov 28
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Thu, Nov 29
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Fri, Nov 30
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Sat, Dec 1
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Sun, Dec 2
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Mon, Dec 3
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Tue, Dec 4
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
    <div class="row">
      <div class="text">
        Wed, Dec 5
      </div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
      <div class="data"></div>
    </div>
</div>

Setup

var table = document.getElementById('table-target'); 
    var tableCells = table.getElementsByClassName('data');
    
    var div = document.getElementById('div-target'); 
    var divCells = div.getElementsByClassName('data'); 
    
    var data = [
    [53,164,243,255], [0,137,236,255], [0,77,147,255], [52,210,64,255]
    ];

Test runner

Ready to run.

Test Ops/sec

table rendering

Testing in
Test	Ops/sec
table rendering	`// test one table $.each(data, function(i, color) { for (var i = 0, ii = tableCells.length; i < ii; ++i) { tableCells[i].style.backgroundColor = 'rgba(' + (color.join(', ')) + ')'; }; });`	ready
div rendering	`// test two div $.each(data, function(i, color) { for (var i = 0, ii = divCells.length; i < ii; ++i) { divCells[i].style.backgroundColor = 'rgba(' + (color.join(', ')) + ')'; }; });`	ready

// test one table
$.each(data, function(i, color) {
  for (var i = 0, ii = tableCells.length; i < ii; ++i) {
    tableCells[i].style.backgroundColor = 'rgba(' + (color.join(', ')) + ')';
  };
});

ready

div rendering

// test two div
$.each(data, function(i, color) {
  for (var i = 0, ii = divCells.length; i < ii; ++i) {
    divCells[i].style.backgroundColor = 'rgba(' + (color.join(', ')) + ')';
  };
});

ready

Revisions

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

Revision 1: published by Jamie Ruderman on December 7, 2012
Revision 2: published on March 13, 2013
Revision 3: published on April 24, 2013
Revision 4: published on May 3, 2013
Revision 5: published on July 5, 2013
Revision 6: published on March 2, 2015
Revision 7: published on March 2, 2015
Revision 8: published on March 2, 2015
Revision 9: published on March 2, 2015