Run results for: CSS dynamic rules

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser: Chrome 135

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
insertRule	28272.6 Ops/sec
insertAdjacentText	2749.3 Ops/sec

HTML Preparation code:

<style type="text/css" id="test-styles"></style>

Script Preparation code:

var sheetId = '#test-styles';

var styleRules = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((sequenceNumber) => ('.test' + sequenceNumber + ' { color: blue; font-weight: bold; background: green; }'));

Tests:

insertRule
var styleSheet = document.querySelector(sheetId); styleSheet.innerText = styleRules.join('\n');
insertAdjacentText
var styleSheet = document.querySelector(sheetId).sheet; styleRules.forEach((styleItem, index) => styleSheet.insertRule(styleItem, index));

Run results for: CSS dynamic rules

insertRule

insertAdjacentText