Benchmark: style sheet - MeasureThat.net

Script Preparation code:

Benchmark.prototype.setup = function() {
  	var html = ['<ul id="list">'];
    for ( var i = 0; i< 100; i++) {
        html.push('<li>' + i + '</li>');
    }
	document.body.innerHTML = html.join('');
    document.head.appendChild(document.createElement('style'));
}

Benchmark.prototype.teardown = function() {
	document.body.innerHTML = '';
    document.head.innerHTML = '';
}

Tests:

style
var lis = document.getElementById('list').getElementsByTagName('li'); for ( var i=0, len = lis.length; i < len; i += 1 ) { lis[i].style.backgroundColor = 'red'; }
style sheet
var sheet = document.querySelector('style').sheet; sheet.insertRule('#list li { background: red }');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
style
style sheet

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Related benchmarks:

display vs position benchmark
DOM structure: bottom up vs top down vs DocumentFragment
display: none vs content-visibility: hidden
removeChild vs display="none" performance benchmark

style sheet (version: 17)

Comparing performance of: style vs style sheet

Created: 7 years ago by: Registered User

Jump to the latest result

style

style sheet

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results