Benchmark: Looping Frozen object: Object Freeze vs Deep Freeze vs Without Object Freeze vs

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

const birdSpecies = {
  forest: {
    species: [
      {
        name: "Northern Cardinal",
        physicalCharacteristics: {
          color: "Red",
          size: "Medium",
          beakType: "Conical"
        },
        diet: {
          primary: "Seeds",
          secondary: "Fruits"
        },
        habitat: "Woodlands and forests"
      },
      {
        name: "Woodpecker",
        physicalCharacteristics: {
          color: "Black, White, and Red",
          size: "Medium",
          beakType: "Chisel-shaped"
        },
        diet: {
          primary: "Insects",
          secondary: "Tree sap"
        },
        habitat: "Wooded areas"
      }
    ]
  },
  desert: {
    species: [
      {
        name: "Roadrunner",
        physicalCharacteristics: {
          color: "Brown and White",
          size: "Medium",
          beakType: "Long and Slim"
        },
        diet: {
          primary: "Insects",
          secondary: "Small reptiles"
        },
        habitat: "Desert and arid regions"
      },
      {
        name: "Cactus Wren",
        physicalCharacteristics: {
          color: "Brown with streaks",
          size: "Small",
          beakType: "Curved"
        },
        diet: {
          primary: "Insects",
          secondary: "Seeds"
        },
        habitat: "Cacti and desert shrubs"
      }
    ]
  },
  wetlands: {
    species: [
      {
        name: "Great Blue Heron",
        physicalCharacteristics: {
          color: "Blue-gray",
          size: "Large",
          beakType: "Long and Sharp"
        },
        diet: {
          primary: "Fish",
          secondary: "Amphibians"
        },
        habitat: "Wetlands and marshes"
      },
      {
        name: "American Coot",
        physicalCharacteristics: {
          color: "Dark gray with white bill",
          size: "Medium",
          beakType: "Flat and short"
        },
        diet: {
          primary: "Aquatic plants",
          secondary: "Small invertebrates"
        },
        habitat: "Lakes and wetlands"
      }
    ]
  }
}


const deepFreeze = obj => {
  for (const key in obj) {
    if (obj.hasOwnProperty(key) && typeof obj[key] === "object" && obj[key] !== null) {
      deepFreeze(obj[key])
    }
  }
  return Object.freeze(obj)
}

 
const frozenObject = Object.freeze(structuredClone(birdSpecies))

const copy = structuredClone(birdSpecies)
const deepFrozenObject = deepFreeze(copy)

const nonFrozenObject = structuredClone(birdSpecies)

Tests:

Loop Frozen Object
for (const [habitat, data] of Object.entries(frozenObject)) { console.log(`Habitat: ${habitat}`) for (const bird of data.species) { console.log(` Name: ${bird.name}`) console.log(` Physical Characteristics:`) for (const [key, value] of Object.entries(bird.physicalCharacteristics)) { console.log(` ${key}: ${value}`) } console.log(` Diet:`) for (const [key, value] of Object.entries(bird.diet)) { console.log(` ${key}: ${value}`) } console.log(` Habitat: ${bird.habitat}`) } }
Loop Deep-Frozen Object
for (const [habitat, data] of Object.entries(deepFrozenObject)) { console.log(`Habitat: ${habitat}`) for (const bird of data.species) { console.log(` Name: ${bird.name}`) console.log(` Physical Characteristics:`) for (const [key, value] of Object.entries(bird.physicalCharacteristics)) { console.log(` ${key}: ${value}`) } console.log(` Diet:`) for (const [key, value] of Object.entries(bird.diet)) { console.log(` ${key}: ${value}`) } console.log(` Habitat: ${bird.habitat}`) } }
Loop Non-Frozen Object
for (const [habitat, data] of Object.entries(nonFrozenObject)) { console.log(`Habitat: ${habitat}`) for (const bird of data.species) { console.log(` Name: ${bird.name}`) console.log(` Physical Characteristics:`) for (const [key, value] of Object.entries(bird.physicalCharacteristics)) { console.log(` ${key}: ${value}`) } console.log(` Diet:`) for (const [key, value] of Object.entries(bird.diet)) { console.log(` ${key}: ${value}`) } console.log(` Habitat: ${bird.habitat}`) } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Loop Frozen Object
Loop Deep-Frozen Object
Loop Non-Frozen Object

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 24 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36

Browser/OS: Chrome 125 on Linux

View result in a separate tab

Test name	Executions per second
Loop Frozen Object	1145.1 Ops/sec
Loop Deep-Frozen Object	1083.7 Ops/sec
Loop Non-Frozen Object	1022.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 26 days ago):

LLMs can make mistakes. Check important info.

### Benchmark Overview

The benchmark outlined in the JSON file measures the performance of looping over different object configurations in JavaScript:

1. **Frozen Object** - An object that has been frozen using `Object.freeze()`.
2. **Deep-Frozen Object** - An object that has been recursively frozen using a custom `deepFreeze()` function.
3. **Non-Frozen Object** - A regular object that has not been subjected to freezing.

The main purpose is to evaluate how these different configurations influence the performance of property access during iteration through nested objects.

### Benchmark Options and Comparison

#### 1. Frozen Object
- **Definition**: By calling `Object.freeze()`, the properties of the `birdSpecies` object are rendered immutable. No new properties can be added or existing properties modified.
- **Pros**:
  - Protects the object from accidental changes, which can lead to bugs.
  - May lead to performance optimizations by the JavaScript engine as it knows the object's structure cannot change.
- **Cons**:
  - If you need to update or modify the object, you must create a new instance, which can be costly in terms of memory and processing.
  
#### 2. Deep-Frozen Object (`deepFreeze`)
- **Definition**: The custom `deepFreeze()` function freezes not just the object itself but also its nested objects, producing a completely immutable structure.
- **Pros**:
  - Offers stronger immutability guarantees, preventing any part of the object (including nested objects) from being modified unintentionally.
  - This could increase performance, as the engine can optimize for deeply nested structures knowing they will not change.
- **Cons**:
  - The function introduces the overhead of additional recursive function calls, which may affect performance negatively compared to a single level freeze.
  - Similar to the Frozen Object, any modification requires reconstructing the entire object structure.
  
#### 3. Non-Frozen Object
- **Definition**: A standard mutable object that allows for changes to its properties.
- **Pros**:
  - Flexible; properties can be added, removed, or modified at any time.
  - No overhead involved in freezing or processing changes.
- **Cons**:
  - Lacks protections against accidental modifications, making the code potentially more error-prone.
  - May lead to performance issues when it comes to optimizations, as the engine cannot assume that the object's structure will remain constant.

### Benchmark Test Cases

Each test case involves iterating over the object and accessing its properties:

- **Loop Frozen Object**: Iterates over the `frozenObject`, accessing properties and logging details.
- **Loop Deep-Frozen Object**: Similar to the first, but works on `deepFrozenObject`.
- **Loop Non-Frozen Object**: Iterates over the `nonFrozenObject`.

These test cases measure the time taken to perform the iteration and property access, returning results like "Executions Per Second."

### Library and Usage

- **Structured Clone**: The benchmark uses `structuredClone()` to create deep copies of objects. This method allows cloning of complex structures like objects, including those with nested objects, while maintaining the values and properties of the cloned object.

### Results Insights

From the benchmark results:
- The loop over the **frozenObject** showed the highest performance with about 2014 executions per second.
- The **deepFrozenObject** had slightly lower performance at around 1816 executions, due to the added overhead of the deep freeze.
- The **nonFrozenObject** performed the worst at approximately 1770 executions, likely due to optimizations not being applicable as the object remains mutable.

### Alternative Approaches

1. **Shallow Cloning**: Instead of full cloning, you could clone only the top-level structure if immutability is needed only on that level. This may provide a performance boost but has less robustness.
  
2. **Immutable Data Structures**: Libraries such as Immutable.js or Immer allow for immutable data manipulation, providing performance optimizations and data integrity while maintaining ease of use in dynamic applications.

3. **Proxy for Immutability**: Instead of freezing an object, JavaScript's Proxy can be used to catch modification attempts and throw errors, effectively enforcing immutability during development.

These alternatives can provide different balances between performance, flexibility, and safety, tailored to specific application needs.

Related benchmarks:

Looping Frozen object: Object Freeze vs Deep Freeze vs Without Object Freeze vs (version: 1)

Comparing performance of: Loop Frozen Object vs Loop Deep-Frozen Object vs Loop Non-Frozen Object

Created: 26 days ago by: Registered User

Jump to the latest result

Loop Frozen Object

Loop Deep-Frozen Object

Loop Non-Frozen Object

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 26 days ago):