Benchmark: Object vs array performance 3

Tests:

Object
const node_type_html = 1; const node_type_text = 2; const node = {}; node.type = node_type_html; node.tag = 'div'; node.children = []; node.attrs = {}; node.type = node_type_text; node.tag = 'span'; node.children.push( 'test' ); node.attrs.class = 'test';
Array with constants
const node_index_type = 0; const node_index_tag = 1; const node_index_children = 2; const node_index_attrs = 3; const node_type_html = 1; const node_type_text = 2; const node = []; node[ node_index_type ] = node_type_html; node[ node_index_tag ] = 'div'; node[ node_index_children ] = []; node[ node_index_attrs ] = {}; node[ node_index_type ] = node_type_text; node[ node_index_tag ] = 'span'; node[ node_index_children ].push( 'test' ); node[ node_index_attrs ].class = 'test';
Array with inline numbers (post-minification)
const node_type_html = 1; const node_type_text = 2; const node_index_type = 0; const node_index_tag = 1; const node_index_children = 2; const node_index_attrs = 3; const node = []; node[ 0 ] = node_type_html; node[ 1 ] = 'div'; node[ 2 ] = []; node[ 3 ] = {}; node[ node_index_type ] = node_type_text; node[ node_index_tag ] = 'span'; node[ node_index_children ].push( 'test' ); node[ node_index_attrs ].class = 'test';
Inline object
const node_type_html = 1; const node_type_text = 2; const node = { type: node_type_text, tag: 'div', children: [], attrs: {} }; node.type = node_type_text; node.tag = 'span'; node.children.push( 'test' ); node.attrs.class = 'test';
inline array
const node_type_html = 1; const node_type_text = 2; const node = [ node_type_html, 'div', [], {} ]; node[ 0 ] = node_type_text; node[ 1 ] = 'span'; node[ 2 ].push( 'test' ); node[ 3 ].class = 'test';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object
Array with constants
Array with inline numbers (post-minification)
Inline object
inline array

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its various components.

**Benchmark Purpose**
The purpose of this benchmark is to compare the performance of different ways of creating objects in JavaScript, specifically focusing on arrays and objects with nested properties.

**Options Compared**

1. **Inline Object**: Creating an object directly inside the `node` declaration.
2. **Array with Constants**: Using an array to store the values of the object's properties as constants.
3. **Array with Inline Numbers (post-minification)**: Similar to the previous option, but using inline numbers in the array.
4. **Inline Array**: Creating an array containing the values of the object's properties.

**Pros and Cons of Each Approach**

1. **Inline Object**:
	* Pros: Simple and easy to read.
	* Cons: May lead to slower performance due to the creation of a new object.
2. **Array with Constants**:
	* Pros: Can be faster than inline objects, as the values are stored in an array instead of being created as separate properties.
	* Cons: Requires careful management of the array's length and indexing to avoid slow operations like `push()` or `splice()`.
3. **Array with Inline Numbers (post-minification)**:
	* Pros: Similar performance benefits as the previous option, but avoids issues related to post-minification (see below).
	* Cons: Uses inline numbers, which can lead to slower execution due to potential parsing and optimization efforts.
4. **Inline Array**:
	* Pros: Simple and easy to read.
	* Cons: May lead to slower performance due to the creation of a new array.

**Post-Minification**
In the Array with Constants option, there is a technique called "post-minification" where the values are assigned using bracket notation (`node[0] = value`) instead of the `=` operator. This can lead to slower execution because browsers need to perform additional parsing and optimization steps when encountering this syntax.

**Library and Syntax Used**

None mentioned in the provided benchmark definition, but it's worth noting that some libraries like React or Angular might use specific object creation patterns that could be tested in a benchmark like this.

**Special JS Features**
None mentioned explicitly, but the use of bracket notation and post-minification techniques are examples of advanced JavaScript features that can impact performance.

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 111 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object	123575120.0 Ops/sec
Array with constants	46030248.0 Ops/sec
Array with inline numbers (post-minification)	45851368.0 Ops/sec
Inline object	127020432.0 Ops/sec
inline array	63950232.0 Ops/sec

Related benchmarks:

Object vs array performance 3 (version: 0)

Comparing performance of: Object vs Array with constants vs Array with inline numbers (post-minification) vs Inline object vs inline array

Created: 2 years ago by: Guest

Jump to the latest result

Object

Array with constants

Array with inline numbers (post-minification)

Inline object

inline array

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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