Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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:
4 years ago
by:
Guest
Jump to the latest result
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>
Run tests (5)
Previous results
Fork
Test case name
Result
Object
Array with constants
Array with inline numbers (post-minification)
Inline object
inline array
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):
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.
Related benchmarks:
Object.fromEntries vs create temp object
iterating from a filled object VS iterating from a map
Array.forEach vs Object.keys().forEach
Array vs Class
new Map vs set array to map
Comments
Confirm delete:
Do you really want to delete benchmark?