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

Revision 42 of this benchmark created on

Preparation HTML

<div id="box">I'm a box</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js">
</script>

Setup

var el = document.getElementById("box");
  var $el = $('#box')

Teardown



            el = null;
  $el = null;

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery.css()
$el.css({
  transform: 'translate3d(0px, 1px, 0px)'
});
ready
Native DOM
el.style.webkitTransform = "translate3d(0px, 1px, 0px)";
el.style.MozTransform = "translate3d(0px, 1px, 0px)";
el.style.msTransform = "translate3d(0px, 1px, 0px)";
el.style.OTransform = "translate3d(0px, 1px, 0px)";
el.style.transform = "translate3d(0px, 1px, 0px)";
ready
single CSS
$el.css('background',"#FF0000");
$el.css('box-shadow',"1px 1px 5px 5px red");
$el.css('width',"100px");
$el.css('height',"100px");
$el.css('display',"block");
ready

Revisions

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