Benchmark: Attribute Parser l

HTML Preparation code:

<div class="main"></div>

Script Preparation code:

const largeTemplate = `<div class="large" data-options="{&quot;smSlowUrl&quot;:&quot;https://kstatic.googleusercontent.com/files/35f440ff890c6189ae31c65dd8471dc64cc11c2b7e155980a1905b22e0d1efff89de049d0907d05f8967ec1e54dea7d7febe1327d70ac8f35bb8d17a059fcaf2&quot;,&quot;smFastUrl&quot;:&quot;https://kstatic.googleusercontent.com/files/c535a43e6fa85b3fd539a235907e8dd385aa19a62094ad815a1679aa34a0129bea2c4c570217e9ff11c884bffed237e2dd75954fd91be1a1bdd44e4ca4256999&quot;,&quot;lgSlowUrl&quot;:&quot;https://kstatic.googleusercontent.com/files/c146fa9200c5a4e4be6ea7d0586bc2c566d8c26d31523e778fee3b17adf078470e28924f107ff7a5cb6e83a67ce804b8dcdb23a54080b4445d5b03ae5d407c5a&quot;,&quot;lgFastUrl&quot;:&quot;https://kstatic.googleusercontent.com/files/f27e919a897b995d58ff3aa0717f09a756c09941362324208bde96c89c3f1fedb14bd70d7a3ea11f64b65b3409f78fa2b4c7b679f3d1c7f8f31576ef563f21a9&quot;,&quot;pauseLabel&quot;:&quot;Pause hero football video&quot;,&quot;playLabel&quot;:&quot;Play hero football video&quot;}">Large</div>`;
const smallTemplate = `<div class="small" 
data-a="https://kstatic.googleusercontent.com/files/35f440ff890c6189ae31c65dd8471dc64cc11c2b7e155980a1905b22e0d1efff89de049d0907d05f8967ec1e54dea7d7febe1327d70ac8f35bb8d17a059fcaf2"
data-b="https://kstatic.googleusercontent.com/files/c535a43e6fa85b3fd539a235907e8dd385aa19a62094ad815a1679aa34a0129bea2c4c570217e9ff11c884bffed237e2dd75954fd91be1a1bdd44e4ca4256999" 
data-c="https://kstatic.googleusercontent.com/files/c146fa9200c5a4e4be6ea7d0586bc2c566d8c26d31523e778fee3b17adf078470e28924f107ff7a5cb6e83a67ce804b8dcdb23a54080b4445d5b03ae5d407c5a" 
data-d="https://kstatic.googleusercontent.com/files/f27e919a897b995d58ff3aa0717f09a756c09941362324208bde96c89c3f1fedb14bd70d7a3ea11f64b65b3409f78fa2b4c7b679f3d1c7f8f31576ef563f21a9" 
data-e="Pause hero football video" 
date-f="Play hero football video&">Small</div>`;

let i = 1000;
const root = document.querySelector('.main');
while (i--) {
    root.innerHTML += largeTemplate;
    root.innerHTML += smallTemplate;
}

Tests:

Atomic Parser
const largeNodes = Array.from(document.querySelectorAll('.large')); largeNodes.map((node) => { const options = node.getAttribute('data-options'); return JSON.parse(options); });
Piecemeal Parser
const smallNodes = Array.from(document.querySelectorAll('.small')); smallNodes.map((node) => { const data = node.dataset; const a = '' + data.a; const b = '' + data.b; const c = '' + data.c; const d = '' + data.d; const e = '' + data.e; const f = '' + data.f; return {a, b, c, d, e, f}; });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Atomic Parser
Piecemeal Parser

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Atomic Parser	1115.6 Ops/sec
Piecemeal Parser	1716.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is designed to compare two different approaches for parsing HTML attributes: Atomic Parser and Piecemeal Parser.

**Atomic Parser**

In this test case, we're creating an array of all elements with a class attribute containing `.large`. We then iterate over the array and extract the `data-options` attribute from each element using `getAttribute()`. Finally, we parse the resulting string as JSON using `JSON.parse()`.

The goal here is to measure how quickly this parser can process large objects with multiple attributes.

**Piecemeal Parser**

In this test case, we're creating an array of all elements with a class attribute containing `.small`. We then iterate over the array and extract each individual attribute from the element's `dataset` property. The attributes are then parsed as strings using concatenation (`+`) and finally returned as an object.

The goal here is to measure how quickly this parser can process smaller attributes one by one.

**Pros and Cons of Each Approach**

* **Atomic Parser:**
	+ Pros:
		- More efficient for large objects with multiple attributes, as it can parse all attributes at once.
		- Less error-prone, as the entire attribute string is parsed at once.
	+ Cons:
		- May be slower for smaller attributes or elements due to the overhead of parsing a larger string.
* **Piecemeal Parser:**
	+ Pros:
		- Faster for smaller attributes or elements, as it can process each attribute individually without parsing an entire string.
		- Less memory-intensive, as only individual attribute values are stored in memory.
	+ Cons:
		- May be slower overall due to the overhead of parsing multiple small strings.
		- More error-prone, as individual attribute values may need to be parsed and concatenated correctly.

**Library Usage**

In this benchmark, the `dataset` property is used on HTML elements to access their attributes. The `dataset` property is a feature introduced in HTML5, which allows developers to store arbitrary data on HTML elements.

**Special JavaScript Features/Syntax**

There are no special JavaScript features or syntax being tested in this benchmark. However, it does rely on the `dataset` property and modern browser support for it.

**Test Results**

The latest benchmark results show that the Piecemeal Parser is slightly faster than the Atomic Parser, with an average of 1715 executions per second compared to 1115 executions per second.

Related benchmarks:

Attribute Parser l (version: 0)

1 large object-attribute v. smaller attributes

Comparing performance of: Atomic Parser vs Piecemeal Parser

Created: 2 years ago by: Guest

Jump to the latest result

Atomic Parser

Piecemeal Parser

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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