JS vs inline

Benchmark created on

Preparation HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        :root {
            --sw-backgroundColor: #FFFFFF;
            --sw-height: 100px;
            --sw-width: 100px;
        }
        .bg-variable {
            background-color: var(--sw-backgroundColor);
            width: var(--sw-width);
            height: var(--sw-height);
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
</html>

Setup

function createComponentWithStyleProp() {
	const div = document.createElement('div');
	div.className = 'bg-variable';
	div.style.setProperty('--sw-backgroundColor', '#FF5733');
	div.style.setProperty('--sw-width', '120px');
	div.style.setProperty('--sw-height', '120px');
document.getElementById('app').appendChild(div);
}
        
function createComponentWithCSSinJS() {
    const div = document.createElement('div');
    div.style.backgroundColor = '#FF5733';
    div.style.width = '120px'; 
    div.style.height = '120px'; 
document.getElementById('app').appendChild(div);
}

Test runner

Ready to run.

Testing in
TestOps/sec
Inline
createComponentWithStyleProp();
ready
JS
createComponentWithCSSinJS();
ready

Revisions

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