Run results for: CSS dynamic rules

Run details:

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

Browser: Chrome 67

Operating system: Windows 7

Device Platform: Desktop

Date tested: 5 years ago

Test name	Executions per second
insertRule	6804.5 Ops/sec
insertAdjacentText	2694.6 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