attr vs getattribute

Benchmark created by Nick Craver on


Preparation HTML

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

<div id="original">
  <div timestamp="99">99</div>
  <div timestamp="999">999</div>
  <div timestamp="12">12</div>
  <div timestamp="11">11</div>
  <div timestamp="10">10</div>
  <div timestamp="9">9</div>
  <div timestamp="8">8</div>
  <div timestamp="7">7</div>
  <div timestamp="6">6</div>
  <div timestamp="5">5</div>
  <div timestamp="4">4</div>
  <div timestamp="3">3</div>
  <div timestamp="2">2</div>
  <div timestamp="1">1</div>
  <div timestamp="9999">9999</div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
.attr()
var myArray = $("#original div")
myArray.sort(function(a, b) {
 a = parseInt($(a).attr("timestamp"), 10);
 b = parseInt($(b).attr("timestamp"), 10);
 if (a > b) {
  return 1;
 } else if (a < b) {
  return -1;
 } else {
  return 0;
 }
});
$("#original").append(myArray);
ready
.getAttribute()
var myArray = $("#original div")
myArray.sort(function(a, b) {
 a = parseInt(a.getAttribute("timestamp"), 10);
 b = parseInt(b.getAttribute("timestamp"), 10);
 if (a > b) {
  return 1;
 } else if (a < b) {
  return -1;
 } else {
  return 0;
 }
});
$("#original").append(myArray);
ready

Revisions

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

  • Revision 1: published by Nick Craver on