cssText vs style (v20)

Revision 20 of this benchmark created on

Description

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

Preparation HTML

<div id="element">
</div>
<style type=”text/css”>
  .newClass { left: 10px; top:50px; }
</style>

Test runner

Ready to run.

Testing in
TestOps/sec
element.style
var element = document.getElementById('element');
element.style.left = '10px';
element.style.top = '50px';
element.style.border="2px solid black";
borderRadius = '1em';
element.style.padding="10px";
element.style.width="100px";
element.style.height="30px";
element.style.backgroundColor="#f3f3f3";
element.style.color="red";
element.style.overflow="scroll";
ready
element.cssText
var element = document.getElementById('element');
element.style.cssText = 'left:10px;top:50px;border:2px solid black;border-radius:1em;padding:10px;width:100px;height:30px;background-color:#f3f3f3 ;color:red;overflow:scroll;';
ready
cssText on var
var element = document.getElementById('element').style.cssText='left:10px;top:50px;border:2px solid black;border-radius:1em;padding:10px;width:100px;height:30px;background-color:#f3f3f3 ;color:red;overflow:scroll;';
ready
concat cssText
var element = document.getElementById('element');
element.style.cssText=''.concat('left:10px;','top:50px;','border:2pxsolid black;','border-radius:1em;','padding:10px;','width:100px;','height:30px;','background-color:#f3f3f3;','color:red;','overflow:scroll;');
ready
cssText no caching
document.getElementById('element').style.cssText='left:10px;top:50px;border:2px solid black;border-radius:1em;padding:10px;width:100px;height:30px;background-color:#f3f3f3 ;color:red;overflow:scroll;';
ready

Revisions

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