Benchmark: inject styles - MeasureThat.net

Script Preparation code:

window.cssReset = `
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
`

Tests:

innerHTML
const styles = document.createElement('style') styles.innerHTML = `${window.cssReset} body {overflow: hidden;}` document.head.appendChild(styles)
createTextNode
const styles = document.createElement('style') styles.appendChild(document.createTextNode(`${window.cssReset} body {overflow: hidden;}`)) document.head.appendChild(styles)
textContent
const styles = document.createElement('style') styles.textContent = `${window.cssReset} body {overflow: hidden;}` document.head.appendChild(styles)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
createTextNode
textContent

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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 JavaScript benchmarks.

**Benchmark Definition**

The provided JSON represents a benchmark definition for measuring the performance of creating and manipulating HTML styles. The script preparation code sets up a CSS reset style, which is then used to create various elements (innerHTML, createTextNode, or textContent) and append them to the document head.

**Options Compared**

Three options are compared:

1. **innerHTML**: Using the `innerHTML` property to set the content of an element.
2. **createTextNode**: Creating a TextNode object using `document.createTextNode()` and then appending it to the element.
3. **textContent**: Setting the textContent property directly on the element.

**Pros and Cons**

Here's a brief summary of each approach:

1. **innerHTML**:
	* Pros: Fastest and most widely supported, as it's a built-in property.
	* Cons: May lead to security issues if not properly sanitized, as it can execute arbitrary JavaScript code.
2. **createTextNode**:
	* Pros: More secure than `innerHTML`, as it doesn't execute arbitrary code.
	* Cons: Requires creating an additional TextNode object and appending it to the element, which may introduce overhead.
3. **textContent**:
	* Pros: Similar to `createTextNode` but with a single property access, potentially faster.
	* Cons: Less widely supported than `innerHTML`, as it's not a built-in property.

**Library Usage**

In this benchmark, no libraries are explicitly mentioned or used. However, some JavaScript features and syntax are employed, such as template literals (`${...}`) and CSS reset styles (e.g., `window.cssReset`).

**Special JS Features/Syntax**

The following special JavaScript features/syntax are used:

1. **Template literals**: Used in the script preparation code to define the CSS reset style.
2. **CSS reset style**: Defined using template literals, which is a modern feature in JavaScript.

Other alternatives for this benchmark could include:

* Using `document.createElement('div')` and setting its innerHTML instead of creating a separate element.
* Implementing a custom parser or serializer to compare performance with different approaches.

These alternatives would require significant changes to the benchmark definition and script preparation code, making them less suitable for this particular benchmark.

Related benchmarks:

inject styles (version: 0)

Comparing performance of: innerHTML vs createTextNode vs textContent

Created: 4 years ago by: Guest

Jump to the latest result

innerHTML

createTextNode

textContent

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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