Benchmark: outerHTML vs getComputedStyle 2

HTML Preparation code:

<div id="container"><div><ul><li><a href="#" class="link"></a></li></ul></div></div>

Script Preparation code:

var node = document.querySelector('.link');
var inner;

for(var i = 0; i < 50; i++) (inner || node).appendChild(inner = document.createElement('div'));
var h1el = document.createElement('h1');
h1el.innerText = 'hi world';
h1el.className
h1el.className = 'target'
inner.appendChild(h1el)

Tests:

innerHTML
var target = document.querySelector('.target'); var parent = document.querySelector('.link'); var target_state = target.outerHTML; var parent_state = parent.outerHTML; var A = 3; if ( target_state !== '' && parent_state !== '') { A = 5; }
getComputedStyle
var target = document.querySelector('.target'); var parent = document.querySelector('.link'); var target_state = window.getComputedStyle(target).position + window.getComputedStyle(target).opacity; var parent_state = window.getComputedStyle(parent).position + window.getComputedStyle(parent).opacity; var A = 3; if ( target_state !== '' && parent_state !== '') { A = 5; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
getComputedStyle

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.

**Benchmark Explanation**

The provided benchmark is designed to measure the performance difference between two approaches in JavaScript: `outerHTML` and `getComputedStyle`. The test case is a simple script that creates multiple HTML elements, appends them to an existing element, and then measures the time it takes for each browser to run a short script.

**What are tested?**

In this benchmark, two options are compared:

1. **innerHTML**: This option uses the `outerHTML` property of the `DocumentElement` interface to retrieve the HTML content of an element.
2. **getComputedStyle**: This option uses the `window.getComputedStyle()` function to retrieve the computed style properties of an element.

**Pros and Cons**

* **innerHTML**:
	+ Pros: Simple and efficient, as it only requires a single DOM query.
	+ Cons: Can be slower for complex styles or large numbers of elements due to CSS computation overhead.
* **getComputedStyle**:
	+ Pros: More accurate for complex styles or layout calculations, as it takes into account the CSS cascade and other factors that affect rendering.
	+ Cons: Requires an additional DOM query, which can add overhead.

**Library and Purpose**

In this benchmark, no libraries are explicitly mentioned. However, it's worth noting that `getComputedStyle` relies on the Web API for computed style properties, which is part of the W3C standard.

**Special JS Feature or Syntax**

No special JavaScript features or syntax are used in this benchmark. The code only uses basic JavaScript constructs like loops, conditional statements, and DOM queries.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are a few options:

1. **CSSOM**: You can use the `CSSOM` API (CSS Object Model) to manipulate styles programmatically, which might be faster than `getComputedStyle`.
2. **DOM Traversal**: Instead of using `outerHTML`, you could traverse the DOM tree manually to retrieve the desired elements and calculate their styles.
3. **Style Attributes**: You can use style attributes (`style` property on elements) instead of CSSOM or `getComputedStyle`.

Keep in mind that each alternative has its own trade-offs, and performance may vary depending on your specific use case.

**Benchmark Results**

The benchmark results show the number of executions per second for two browsers (Chrome 117 on Mac OS X 10.15.7). The browser with the highest execution rate is Chrome 117, which performs better for both `innerHTML` and `getComputedStyle`. However, it's essential to note that these results may vary depending on your specific environment and hardware configuration.

Related benchmarks:

outerHTML vs getComputedStyle 2 (version: 1)

Comparing performance of: innerHTML vs getComputedStyle

Created: 2 years ago by: Registered User

Jump to the latest result

innerHTML

getComputedStyle

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