Run results for: CSS dynamic rules

Run details:

User agent: Mozilla/5.0 (Linux; Android 9; VOG-L29) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Mobile Safari/537.36

Browser: Chrome Mobile 76

Operating system: Android

Device Platform: Mobile

Date tested: 5 years ago

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