Benchmark: HTML Insertion UwU

HTML Preparation code:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>
<div id="testElement" style="display:none"></div>

Script Preparation code:

var js = document.getElementById('testElement');
var jq = $('#testElement');
var len = 500;

Tests:

A
var html = ''; for (var i = 0; i < len; i++) { html += 'A: Just some ' + i + ' here'; } js.innerHTML = html js.innerHTML = '';
C
var html = ''; for (var i = 0; i < len; i++) { html += 'A: Just some ' + i + ' here'; } jq.append(html); jq.html('');
D
var html = ''; for (var i = 0; i < len; i++) { var p = document.createElement("p"); p.innerHTML = 'D: Just some ' + i + ' here'; js.appendChild(p); } js.innerHTML = '';
E
var html = ''; for (var i = 0; i < len; i++) { var p = document.createElement("p"); var s = document.createElement("span"); s.appendChild( document.createTextNode(i) ); p.appendChild( document.createTextNode("E: Just some ") ); p.appendChild( s ); p.appendChild( document.createTextNode(" here") ); js.appendChild(p); } js.innerHTML = '';
F
var html = ''; for (var i = 0; i < len; i++) { html += 'A: Just some ' + i + ' here'; } js.insertAdjacentHTML('beforeend',html); js.innerHTML = '';
G
var html = ''; var p = document.createElement("p"); var s = document.createElement("span"); s.appendChild( document.createTextNode(i) ); p.appendChild( document.createTextNode("E: Just some ") ); p.appendChild( s ); p.appendChild( document.createTextNode(" here") ); for (var i = 0; i < len; i++) { js.appendChild(p); } js.innerHTML = '';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
A
C
D
E
F
G

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested.

**Benchmark Context**

The test cases are designed to measure the performance of inserting HTML content into a web page using different methods.

**Tested Options**

There are four main options compared:

1. **`innerHTML`**: Setting the `innerHTML` property of an element.
2. **`append()`**: Using jQuery's `append()` method to add HTML content to an element.
3. **`insertAdjacentHTML()`**: Using the `insertAdjacentHTML()` method to insert HTML content before or after an element.
4. **Manually creating elements and appending them**: Creating individual HTML elements using `document.createElement()`, setting their contents, and then appending them to another element.

**Pros and Cons of Each Approach**

1. **`innerHTML`**:
	* Pros: Simple, widely supported, and fast.
	* Cons: Can be slower for large amounts of content due to the need to parse and render the HTML.
2. **`append()`**:
	* Pros: Faster than `innerHTML`, as it avoids parsing and rendering overhead.
	* Cons: Requires jQuery, which may not be included in all environments.
3. **`insertAdjacentHTML()`**:
	* Pros: Fast, modern, and widely supported.
	* Cons: Limited to inserting content before or after an element, rather than replacing the existing content.
4. **Manually creating elements and appending them**:
	* Pros: Can be customized to fit specific use cases, such as inserting multiple elements at once.
	* Cons: More complex, slower due to the need to create individual elements, and may require more memory.

**Library and Special JS Features**

The test cases use jQuery, a popular JavaScript library for DOM manipulation. The `append()` method is part of jQuery's API.

There are no special JavaScript features or syntax used in this benchmark.

**Alternatives**

Other alternatives for inserting HTML content into an element include:

* Using CSS templates and the `innerHTML` property
* Using the `textContent` property (which is faster than `innerHTML`, but may not be supported in older browsers)
* Using a templating engine like Handlebars or Mustache

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:99.0) Gecko/20100101 Firefox/99.0

Browser/OS: Firefox 99 on Windows

View result in a separate tab

Test name	Executions per second
A	839.1 Ops/sec
C	353.0 Ops/sec
D	503.5 Ops/sec
E	491.3 Ops/sec
F	952.0 Ops/sec
G	3364.5 Ops/sec

Related benchmarks:

HTML Insertion UwU (version: 3)

Comparing performance of: A vs C vs D vs E vs F vs G

Created: 2 years ago by: Registered User

Jump to the latest result

A

C

D

E

F

G

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):