Multiple setProperty vs cssText vs setAttribute vs style

JavaScript performance comparison

Test case created by kzhouTL

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  const div = document.createElement('DIV');
  div.id = 'testDiv';

};

Benchmark.prototype.teardown = function() {
  document.body.removeChild(div);

};
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
multiple element.style.setProperty
div.style.setProperty('width', '100%', 'important');
div.style.setProperty('height', '100%', 'important');
div.style.setProperty('background-color', '#000', 'important');
div.style.setProperty('opacity', 0.1, 'important');
div.style.setProperty('display', 'none', 'important');
div.style.setProperty('position', 'absolute', 'important');
div.style.setProperty('top', '0', 'important');
div.style.setProperty('cursor', 'pointer', 'important');
div.style.setProperty('z-index', 2, 'important');
document.body.appendChild(div);
pending…
element.style.cssText
var styleString = "width: 100% !important; height: 100% !important; background-color: #000 !important; opacity: 0.1 !important; display: none !important; position: absolute !important; top: 0 !important; cursor: pointer !important; z-index: 2 !important;";

div.style.cssText = styleString;
document.body.appendChild(div);
pending…
element.setAttribute
var styleString = "width: 100% !important; height: 100% !important; background-color: #000 !important; opacity: 0.1 !important; display: none !important; position: absolute !important; top: 0 !important; cursor: pointer !important; z-index: 2 !important;";

div.setAttribute('style', styleString);
document.body.appendChild(div);
pending…
setting element.style directly
var styleString = "width: 100% !important; height: 100% !important; background-color: #000 !important; opacity: 0.1 !important; display: none !important; position: absolute !important; top: 0 !important; cursor: pointer !important; z-index: 2 !important;";

div.style = styleString;
document.body.appendChild(div);
pending…

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

Compare results of other browsers

0 Comments