jQuery attr() vs. Native setAttribute() (v17)

Revision 17 of this benchmark created on

Description

jQuery's attr() method will always have more overhead because of the extensibility added.

Preparation HTML

<script src="http://d3js.org/d3.v3.min.js"></script><input type="text" id="btn"></div>

Test runner

Ready to run.

Testing in
TestOps/sec
1
//$("#btn").attr("disabled", "disabled");

d3.select("#btn").attr({
  "x": 100 / 2,
  "y": 100 / 2,
  "width": 100,
  "height": 100,
  "cx": 1,
  "cy": 1,
  "net": 1,
  "pin": 1,
  "number": 1
});
ready
2
//document.getElementById('btn').setAttribute("disabled", "disabled");

d3.select("#btn").attr("x", 100 / 2)
  .attr("y", 100 / 2)
  .attr("width", 100)
  .attr("height", 100)
  .attr("cx", 1)
  .attr("cy", 1)
  .attr("net", 1)
  .attr("pin", 1)
  .attr("number", 1)
ready
3
//document.getElementById('btn').setAttribute("disabled", "disabled");

function setAttributes(el, attrs) {
  for (var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}
setAttributes(document.getElementById('btn'), {
  "x": 100 / 2,
  "y": 100 / 2,
  "width": 100,
  "height": 100,
  "cx": 1,
  "cy": 1,
  "net": 1,
  "pin": 1,
  "number": 1
});
ready

Revisions

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