Run results for: style sheet

Run details:

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

Browser: Chrome 68

Operating system: Windows

Device Platform: Desktop

Date tested: 6 years ago

Test name	Executions per second
style	1024.6 Ops/sec
style sheet	65527.3 Ops/sec

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 }');