JS vs inline (v2)

Revision 2 of this benchmark created on

Preparation HTML

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

Setup

function createComponentWithStyleProp() {
	document.getElementById('app').className = 'xyz wd bg h';
}
        

function createComponentWithCSSinJS() {
	const div = document.getElementById('app');
	div.style.setProperty('--sw-backgroundColor', '#FFFFFF');
	div.style.setProperty('--sw-width', '100px');
	div.style.setProperty('--sw-height', '100px');
	div.className = 'wd bg h';
}

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.