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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 5 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

Browser/OS: Chrome 68 on Windows

View result in a separate tab

Test name	Executions per second
style	687.0 Ops/sec
style sheet	13150.1 Ops/sec

style sheet (version: 17)

Comparing performance of: style vs style sheet

Created: 5 years ago by: Registered User

Jump to the latest result

style

style sheet

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A