jQuery attr performance

Benchmark created by Jamie Ruderman on


Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<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="empty"></td>
      <td class="empty"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></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="empty"></td>
      <td class="empty"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
    </tr>
    <tr>
      <td class="text">
        Thu, Nov 22
      </td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
    </tr>
    <tr>
      <td class="text">
        Fri, Nov 23
      </td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
    </tr>
    <tr>
      <td class="text">
        Sat, Nov 24
      </td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
    </tr>
    <tr>
      <td class="text">
        Sun, Nov 25
      </td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
    </tr>
    <tr>
      <td class="text">
        Mon, Nov 26
      </td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <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="empty"></td>
      <td class="empty"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <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="empty"></td>
      <td class="empty"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="empty"></td>
      <td class="empty"></td>
    </tr>
    <tr>
      <td class="text">
        Thu, Nov 29
      </td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <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="empty"></td>
      <td class="empty"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <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="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
    </tr>
    <tr>
      <td class="text">
        Sun, Dec 2
      </td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="empty"></td>
    </tr>
    <tr>
      <td class="text">
        Mon, Dec 3
      </td>
      <td class="empty"></td>
      <td class="empty"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <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="empty"></td>
      <td class="empty"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <td class="data"></td>
      <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="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
      <td class="discard"></td>
    </tr>
  </tbody>
</table>

Setup

var elArray = $('.hours td');
    var data = [
    [53,164,243,255], [53,164,243,255], [53,164,243,255], [0,137,236,255], [0,21,36,255], [0,21,36,255], [0,21,36,255]
    ];

Test runner

Ready to run.

Testing in
TestOps/sec
set array
$.each(data, function(i, color) {
  elArray.css('background-color', 'rgba('+ (color.join(', ')) +')');
});
ready
set individual
$.each(data, function(i, color) {
  $.each(elArray, function(el) {
    $(el).css('background-color', 'rgba('+ (color.join(', ')) +')');
  });
});
ready
set without jquery
$.each(data, function(i, color) {
  $.each(elArray, function(el) {
    el.style.background-color('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