jQuery css vs style.webkitTransform (translate3d)

Benchmark created by Simen Brekken on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="box" style="position: absolute; width: 200px; height: 200px; -webkit-transform: translate3d(0, 0, 0)"></div>
<script>
  var div = $('#box');
  var elm = div.get(0);
  var x = 0;
  var y = 0;
  var matrix = new WebKitCSSMatrix();
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
.css()
div.css('-webkit-transform', 'translate3d(' + (x++) + 'px,' + (y++) + 'px,0)');
ready
.style.webkitTransform
elm.style.webkitTransform = 'translate3d(' + (x++) + 'px, ' + (y++) + 'px,0)';
ready
css() (WebKitCSSMatrix)
matrix.e = x++;
matrix.f = y++;

div.css('-webkit-transform', matrix);
 
ready
.style.webkitTransform (WebKitCSSMatrix)
matrix.e = x++;
matrix.f = y++;

elm.style.webkitTransform = matrix;
 
ready

Revisions

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