cssText vs style (v6)

Revision 6 of this benchmark created by John-David Dalton on

Description

Comparing the performance of using style against changing directly cssText. Also compared against with just setting the attribute.

Force a reset and reflow after each test.

Preparation HTML

<svg width="300px" height="300px">
<text x="25" y="50" font-size="24">SVG Circle Element</text>
<circle id="circle" cx="125" cy="150" r="50" stroke-width="5"/>
</svg>

Setup

var element = document.getElementById('circle');
    var style = element.style;
    
    var fill = 'pink';
    var stroke = 'purple';

Test runner

Ready to run.

Testing in
TestOps/sec
element.style
style.fill = fill;
style.stroke = stroke;

element.offsetLeft;
element.setAttribute('fill', '');
element.setAttribute('stroke', '');
style.cssText = '';
ready
element.cssText
style.cssText = 'fill:' + fill + ';stroke:' + stroke;

element.offsetLeft;
element.setAttribute('fill', '');
element.setAttribute('stroke', '');
style.cssText = '';
ready
concat element.cssText
style.cssText += ';fill:' + fill + ';stroke:' + stroke;

element.offsetLeft;
element.setAttribute('fill', '');
element.setAttribute('stroke', '');
style.cssText = '';
ready
element.setAttribute
element.setAttribute('fill', fill);
element.setAttribute('stroke', stroke);

element.offsetLeft;
element.setAttribute('fill', '');
element.setAttribute('stroke', '');
style.cssText = '';
ready

Revisions

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