Benchmark: CSS dynamic rules

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
insertRule
insertAdjacentText

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

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

Browser/OS: Chrome 141 on Windows

View result in a separate tab

Test name	Executions per second
insertRule	15806.8 Ops/sec
insertAdjacentText	1932.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of CSS dynamic rules and benchmarking.

**What is tested?**

The provided JSON represents two individual test cases for measuring performance differences between two approaches to inserting CSS rules:

1. `insertRule`: This method inserts a new rule at the specified index in the style sheet.
2. `insertAdjacentText`: This method inserts a string of CSS text at the specified position relative to the element.

**Options compared**

The two options are compared in terms of their performance, measured by the number of executions per second.

**Pros and Cons of each approach:**

1. `insertRule`:
	* Pros:
		+ Typically more efficient, as it avoids creating a new string for insertion.
		+ Can be faster, especially when inserting multiple rules at once.
	* Cons:
		+ May require additional memory allocation or copying for large stylesheets.
		+ Can be slower in some cases due to the overhead of parsing and manipulating the style sheet.
2. `insertAdjacentText`:
	* Pros:
		+ Creates a new string that can be inserted, which might be beneficial when working with existing CSS text.
		+ Might be easier to implement for certain use cases (e.g., inserting a fragment of CSS).
	* Cons:
		+ Typically slower due to the overhead of creating and manipulating the string.
		+ May require more memory allocation or copying.

**Library/Utility functions**

Neither of the two options directly uses external libraries, but they do rely on browser-specific APIs:

1. `insertRule`: Uses the `document.querySelector` API to select the style sheet element.
2. `insertAdjacentText`: Also relies on `document.querySelector` to select the style sheet element.

**Special JS feature/syntax**

Neither of the two options uses any special JavaScript features or syntax. They are straightforward, browser-standard APIs for interacting with CSS stylesheets.

**Other alternatives**

If you're interested in exploring alternative approaches to inserting CSS rules, consider the following:

1. `CSSStyleSheet.insertRule`: This method is similar to `insertRule`, but it provides more flexibility by allowing you to specify an index and a rule string.
2. `CSSStyleSheet.appendURL` + `CSSStyleSheet.insertRule`: This approach involves appending a URL to the style sheet and then using `insertRule` to insert rules from the appended URL.

Keep in mind that these alternatives might have different performance characteristics or trade-offs, so it's essential to evaluate them based on your specific use case and requirements.

Related benchmarks:

CSS dynamic rules (version: 3)

Comparing performance of: insertRule vs insertAdjacentText

Created: 6 years ago by: Registered User

Jump to the latest result

insertRule

insertAdjacentText

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):