jQuery.css() vs. native DOM (v36)

Revision 36 of this benchmark created on

Preparation HTML

<div class="abc123">I'm a box</div>
<div class="abc123">I'm a box</div>
<div class="abc123">I'm a box</div>
<div class="abc123">I'm a box</div>
<div class="abc123">I'm a box</div>
<div class="abc123">I'm a box</div>
<div class="abc123">I'm a box</div>
<div class="abc123">I'm a box</div>
<div class="abc123">I'm a box</div>
<div class="abc123">I'm a box</div>
<div class="abc123">I'm a box</div>
<div class="abc123">I'm a box</div>
<div class="abc123">I'm a box</div>
<div class="abc123">I'm a box</div>

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

<script>
function prop1(els, map) {
  for (var i=0, len=els.length; i<len; i++) {
    var el = els[i];
    for (var key in map) {
      el[key] = map[key];
    }
  }
}
function prop2(els, map) {
  var len = els.length;
  for (var key in map) {
    var value = map[key];
    for (var i=0; i<len; i++) {
      els[i][key] = value;
    }
  }
}
</script>

Setup

$els = $(".abc123");

Teardown



            els = null;

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery.prop()
$els.prop({
  abc1: 57,
  abc2: 'string',
  abc3: function() {},
  abc4: {}
});
ready
Native DOM 1
prop1($els, {
  abc1: 57,
  abc2: 'string',
  abc3: function() {},
  abc4: {}
});
ready
Native DOM 2
prop2($els, {
  abc1: 57,
  abc2: 'string',
  abc3: function() {},
  abc4: {}
});
ready

Revisions

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