Run results for: style vs. style.cssText - additional styles

Run details:

User agent: Mozilla/5.0 (Linux; Android 6.0.1; SM-G532M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Mobile Safari/537.36

Browser: Chrome Mobile 92

Operating system: Android 6.0.1

Device Platform: Mobile

Date tested: one year ago

Test name	Executions per second
style	550.2 Ops/sec
style.cssText	654.7 Ops/sec

HTML Preparation code:

<div id='a'>foo</div>
<div id='b'>bar</div>

AخA
 
<div id='a'>foo</div>
<div id='b'>bar</div>

Script Preparation code:

var a = document.getElementById('a');
var b = document.getElementById('b');

 
var a = document.getElementById('a');var b = document.getElementById('b');

Tests:

style

const fontSize = 20 * Math.random();

a.style.fontSize = `${fontSize}px`;
a.style.letterSpacing = `-${Math.random()}em`;
a.style.wordSpacing = `${Math.random()}em`;
a.style.lineHeight = `${Math.random()}`;
a.style.textIndent = a.style.fontSize;

const x = a.getBoundingClientRect();

​x
 
const fontSize = 20 * Math.random();​a.style.fontSize = `${fontSize}px`;a.style.letterSpacing = `-${Math.random()}em`;a.style.wordSpacing = `${Math.random()}em`;a.style.lineHeight = `${Math.random()}`;a.style.textIndent = a.style.fontSize;​const x = a.getBoundingClientRect();

style.cssText

const fontSize = 20 * Math.random();

b.style.cssText = `
  font-size: ${fontSize}px;
  letter-spacing: -${Math.random()}em;
  word-spacing: ${Math.random()}em;
  line-height: ${Math.random};
  textIndent: ${fontSize}px;
`;
const x = b.getBoundingClientRect();

 
const fontSize = 20 * Math.random();​b.style.cssText = `  font-size: ${fontSize}px;  letter-spacing: -${Math.random()}em;  word-spacing: ${Math.random()}em;  line-height: ${Math.random};  textIndent: ${fontSize}px;`;const x = b.getBoundingClientRect();