[jQuery/Zepto] .prop() versus .attr() (v7)

Revision 7 of this benchmark created by Heavensrevenge on

Description

Measures the performance of getting and setting DOM properties.

Preparation HTML

<script src="//code.jquery.com/jquery-git2.min.js"></script>
<script src="//zeptojs.com/zepto.min.js"></script>
<script src="//fastjs.net/js/fast.min.js"></script>

<div id="test" class="hooray">Why, hello there!</div>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery prop GET
jQuery("#test").prop('className');
ready
jQuery attr GET
jQuery("#test").attr('class');
ready
jQuery prop SET
jQuery("#test").prop('className', 'newKlass');
ready
jQuery attr SET
jQuery("#test").attr('class', 'newKlass');
ready
Zepto prop GET
Zepto("#test").prop('className');
ready
Zepto attr GET
Zepto("#test").attr('class');
ready
Zepto prop SET
Zepto("#test").prop('className', 'newKlass');
ready
Zepto attr SET
Zepto("#test").attr('class', 'newKlass');
ready
FastJS attr GET
f.attr('#test', 'class');
ready
FastJS attr SET
f.attr('#test', 'class', 'newKlass');
ready
Direct DOM prop set
document.getElementById('test').className = 'newKlass';
ready
Direct DOM prop read
document.getElementById('test').className;
ready
Direct DOM attr set
document.getElementById('test').attributes.class.value = 'newKlass';
ready
Direct DOM attr read
document.getElementById('test').attributes.class.value;
ready

Revisions

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

  • Revision 1: published by Brian on
  • Revision 2: published on
  • Revision 3: published by Theo Salvador on
  • Revision 4: published on
  • Revision 5: published on
  • Revision 6: published by Heavensrevenge on
  • Revision 7: published by Heavensrevenge on