Benchmark: hex vs dec array

Script Preparation code:

let A=['div','a','span','p','input','ul'].map(x=>document.createElement(x));

AخA
 
let A=['div','a','span','p','input','ul'].map(x=>document.createElement(x));

Tests:

big int array style

let B=[0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225],C=Array(64),i=0;
for(;i<64;i+=8){
  let x=B[i>>3];
  C[i+0]=A[x&15].cloneNode();
  x >>= 4;
  C[i+1]=A[x&15].cloneNode();
  x >>= 4;
  C[i+2]=A[x&15].cloneNode();
  x >>= 4;
  C[i+3]=A[x&15].cloneNode();
  x >>= 4;
  C[i+4]=A[x&15].cloneNode();
  x >>= 4;
  C[i+5]=A[x&15].cloneNode();
  x >>= 4;
  C[i+6]=A[x&15].cloneNode();
  x >>= 4;
  C[i+7]=A[x&15].cloneNode();
}

 
let B=[0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225],C=Array(64),i=0;for(;i<64;i+=8){  let x=B[i>>3];  C[i+0]=A[x&15].cloneNode();  x >>= 4;  C[i+1]=A[x&15].cloneNode();  x >>= 4;  C[i+2]=A[x&15].cloneNode();  x >>= 4;  C[i+3]=A[x&15].cloneNode();  x >>= 4;  C[i+4]=A[x&15].cloneNode();  x >>= 4;  C[i+5]=A[x&15].cloneNode();  x >>= 4;  C[i+6]=A[x&15].cloneNode();  x >>= 4;  C[i+7]=A[x&15].cloneNode();}

string style
let C=Array(64),i=0; for(;i<64;++i)C[i]=A['0122222501222225012222250122222501222225012222250122222501222225'.charCodeAt(i)-48].cloneNode();
let C=Array(64),i=0;
for(;i<64;++i)C[i]=A['0122222501222225012222250122222501222225012222250122222501222225'.charCodeAt(i)-48].cloneNode();
hybrid
let B='\x01\x22\x22\x25\x01\x22\x22\x25\x01\x22\x22\x25\x01\x22\x22\x25\x01\x22\x22\x25\x01\x22\x22\x25\x01\x22\x22\x25\x01\x22\x22\x25', C=Array(64),i=0; for(;i<32;++i) { let x=B.charCodeAt(i) C[(i<<1)]=A[x>>4].cloneNode(); C[(i<<1)+1]=A[x&15].cloneNode(); }
let B='\x01\x22\x22\x25\x01\x22\x22\x25\x01\x22\x22\x25\x01\x22\x22\x25\x01\x22\x22\x25\x01\x22\x22\x25\x01\x22\x22\x25\x01\x22\x22\x25', C=Array(64),i=0;
for(;i<32;++i) {
let x=B.charCodeAt(i)
C[(i<<1)]=A[x>>4].cloneNode();
C[(i<<1)+1]=A[x&15].cloneNode();
}

big int looped

let B=[0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225],C=Array(64),i=0;
for(;i<64;i+=8){
  let x=B[i>>3], j=0;
  do {
    C[i+j]=A[x&15].cloneNode();
    x >>= 4;
    ++j;
  } while (j < 8);
}

​x
 
let B=[0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225],C=Array(64),i=0;for(;i<64;i+=8){  let x=B[i>>3], j=0;  do {    C[i+j]=A[x&15].cloneNode();    x >>= 4;    ++j;  } while (j < 8);}​

big int looped 2

let B=[0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225],C=Array(64),i=0;
for(;i<8;++i){
  let x=B[i], j=0;
  let z=(i<<3);
  do {
    C[z|j]=A[x&15].cloneNode();
    x >>= 4;
    ++j;
  } while (j < 8);
}

 
let B=[0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225,0x1222225],C=Array(64),i=0;for(;i<8;++i){  let x=B[i], j=0;  let z=(i<<3);  do {    C[z|j]=A[x&15].cloneNode();    x >>= 4;    ++j;  } while (j < 8);}​

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
big int array style
string style
hybrid
big int looped
big int looped 2

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
big int array style	158382.9 Ops/sec
string style	167566.1 Ops/sec
hybrid	166418.2 Ops/sec
big int looped	165342.1 Ops/sec
big int looped 2	165605.2 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark named "Mass replace vs add again" assesses the performance of different methods for manipulating the DOM (Document Object Model) in a web environment using JavaScript. Specifically, it compares the performance of three approaches for updating the contents of DOM nodes.

### Test Cases and Their Descriptions

1. **Mass replace (loop node itself)**:
   - **Benchmark Definition**: 
     ```javascript
     for (let i = 0; i < 20; ++i) {
       let G = B(['abc', 'def', 'hij']);
       D[i][0x4].replaceWith(G[0x4]);
       D[i] = G;
     }
     ```
   - **Description**: This method runs a loop 20 times, generating new nodes using the function `B`. It replaces the last node in each iteration with a new node created, and updates the reference in the array `D`.
   - **Pros**: Direct and straightforward approach for replacing existing nodes.
   - **Cons**: The constant replacement operation may lead to performance overhead due to continuous rendering and reflowing of the DOM.

2. **Mass replace (loop node itself but with documentFragment)**:
   - **Benchmark Definition**:
     ```javascript
     let P = new DocumentFragment();
     let H = [];
     for (let i = 0; i < 20; ++i) {
       let E = B(['abc', 'def', 'hij']);
       P.appendChild(E[0x4]);
       H.push(E);
     }
     C.replaceChildren(P);
     D = H;
     ```
   - **Description**: This method uses a `DocumentFragment`, which is a lightweight container for DOM nodes, to collect multiple nodes and replace all existing children of the target element (`C`) in one operation.
   - **Pros**: Using `DocumentFragment` minimizes the reflow by batching changes to the DOM, enhancing performance compared to direct replacement. `replaceChildren` replaces all previous children with new ones at once, further optimizing re-rendering.
   - **Cons**: Slightly more complex than simple replacements but performs better in terms of DOM manipulation efficiency.

3. **Mass change (reactive elems only)**:
   - **Benchmark Definition**:
     ```javascript
     for (let G of D) {
       G[0x00].textContent = 'ava';
       G[0x01].textContent = 'leigh';
       G[0x02].textContent = 'sprague';
     }
     ```
   - **Description**: This test changes the text content of specific positions in the previously created elements. It iterates through the elements stored in array `D` and updates their text directly.
   - **Pros**: This method is efficient for updating existing nodes without changing their structure. Directly modifying `textContent` avoids unnecessary reflow that can occur with replacing whole nodes.
   - **Cons**: While performance is generally higher due to fewer DOM manipulations, the approach strongly relies on how the rendered content responds to dynamic changes.

### Comparison Summary

- **Performance**: According to the benchmark results, the "Mass change (reactive elems only)" method shows significantly higher performance (478,899.06 executions per second) compared to both "Mass replace" tests, indicating that direct updates to existing nodes are more efficient than replacing nodes.
- **Node Replacement vs. Text Change**: The "Mass replace with documentFragment" method, while more optimized than the basic replace approach, still cannot match the efficiency of directly changing text content in existing nodes.
- **DocumentFragment Advantage**: Batching changes with a `DocumentFragment` reduces the number of reflows and paints, making it a better choice for mass updates where node replacement is required.

### Other Considerations and Alternatives

- Alternatives to these approaches could include using modern frameworks (like React or Vue.js), which provide optimized ways to manage the DOM. These frameworks use a virtual DOM to minimize direct manipulations, leading to performance benefits.
- Direct DOM manipulations (like assignations to `textContent` or using `innerHTML`) can be supplemented with library utilities (e.g., jQuery) but are generally less performant due to additional abstraction layers.
- In cases where styling or complex attributes need to be managed, further considerations for performance and maintainability should be made, weighing library usage against manual DOM manipulations.

This benchmark and analysis help software engineers better understand different approaches to DOM manipulation and guide them toward optimal methods for their applications.

Related benchmarks:

hex vs dec array (version: 86)

Comparing performance of: big int array style vs string style vs hybrid vs big int looped vs big int looped 2

Created: 2 months ago by: Registered User

Jump to the latest result