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

Revision 39 of this benchmark created by DJ on

Preparation HTML

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

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

Setup

var el = document.getElementById("box"),
    trs = {
      x: 10,
      y: -22,
      z: 0
    },
    rot = {
      x: 0,
      y: 0,
      z: -22
    },
    scl = {
      x: 1,
      y: 2,
      z: 1
    },
    tform = {
      trs: ' translate3d(' + trs.x + 'px, ' + trs.y + 'px, ' + trs.z + 'px)',
      rot: ' rotateZ(' + rot.z + 'rad)',
      scl: ' scale3d(' + scl.x + ', ' + scl.y + ', 1)'
    },
    cssPrefix = '-webkit-',
    margin = ' ' + (el.offsetHeight / -2) + 'px 0 0 ' + (el.offsetWidth / -2) + 'px; '

Teardown



            el = null;

Test runner

Ready to run.

Testing in
TestOps/sec
Native DOM
el.style.cssText = margin + cssPrefix + ':' + tform.trs + tform.rot + tform.scl + ';';
ready
jQuery.css()
$(el).css(cssPrefix, tform.trs + tform.rot + tform.scl);
ready

Revisions

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