cssText vs style (v17)

Revision 17 of this benchmark created by molokoloco on

Description

Comparing the performance of using style against changing directly cssText. Also compared against with just adding a css classname.

Added forced reflow for testing how much elements you can effectively redraw with each methods

get an element width force the render so i test with that...

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="element">
</div>
<style type=”text/css”>
  .newClass { left: 10px; top:50px; }
</style>

Setup

var $element = $('#element');
    
    
    // REQUEST ANIMATION FRAME
    if (!('requestAnimationFrame' in window)) {
        var lastTime = 0,
                vendors = ['webkit', 'moz', 'ms', 'o'];
    
        for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
                window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
                window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
        }
    
        if (!('requestAnimationFrame' in window)) {
                window.requestAnimationFrame = function (callback, element) {
                        var currTime = new Date().getTime(),
                                timeToCall = Math.max(0, 16 - (currTime - lastTime)),
                                id = window.setTimeout(function () {
                                        callback(currTime + timeToCall);
                                }, timeToCall);
                        lastTime = currTime + timeToCall;
                        return id;
                };
        }
        if (!('cancelAnimationFrame' in window)) {
                window.cancelAnimationFrame = function(id) {
                        clearTimeout(id);
                };
        }
    }

Test runner

Ready to run.

Testing in
TestOps/sec
element.style
var element = document.getElementById('element');
var left = 10;
var top = 50;
element.style.left = left + 'px';
element.style.top = top + 'px';

var width = $element.width();
ready
element.cssText
var element = document.getElementById('element');
var left = 10;
var top = 50;
element.style.cssText = '; left: ' + left + 'px; top: ' + top + 'px;';

var width = $element.width();
ready
change css class
var element = document.getElementById('element');
element.className = 'newClass';

var width = $element.width();
ready
jQuery style
$('#element').css({
  'left': 10,
  'top': 50
});

var width = $element.width();
ready
classList
var element = document.getElementById('element');
element.classList.add('newClass');

var width = $element.width();
ready
Set attribute
var element = document.getElementById('element');
var left = 10;
var top = 50;
element.setAttribute('style', 'left: ' + left + 'px; top: ' + top + 'px;');

var width = $element.width();
ready

Revisions

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