unique innerHTML vs multiple style.setProperty

Benchmark created on

Description

unique innerHTML vs multiple style.setProperty

Preparation HTML

<style>
	span::after {
		content: var(--myvar)
	}
</style>

<template id="myTemplate">
	<ul>
		<li><span>[[myVar]]</span></li>
	</ul>
</template>

<div id="testDiv">
	<ul>
		<li><span></span></li>
	</ul>	
	<ul>
		<li><span></span></li>
	</ul>	
	<ul>
		<li><span></span></li>
	</ul>	
	<ul>
		<li><span></span></li>
	</ul>	
	<ul>
		<li><span></span></li>
	</ul>	
	<ul>
		<li><span></span></li>
	</ul>	
	<ul>
		<li><span></span></li>
	</ul>	
	<ul>
		<li><span></span></li>
	</ul>	
	<ul>
		<li><span></span></li>
  </ul>											
</div>

Setup

const nodeElement = document.getElementById('testDiv')
let values = new Array(10).fill('').map(() => Math.random().toString(36).substring(2, 7));

let templateHtml = document.getElementById('myTemplate').innerHTML

let subModules = Array.from(document.getElementsByTagName('span'))

Test runner

Ready to run.

Testing in
TestOps/sec
Set values with a unique innerHTML
let finalHtml = ''
values.forEach((itemData) => {
	finalHtml += templateHtml.replace('[[myVar]]', itemData)
})
nodeElement.innerHTML = finalHtml
ready
Set values with multiple style.setProperty
subModules.forEach((nodeSubModule, key) => {
	nodeSubModule.style.setProperty('--myvar', values[key])
})
ready

Revisions

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