MeasureThat.net

Run results for: structuredClone vs Immer

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36
Chrome 129
Windows
Desktop
7 months ago
Test name Executions per second
produce 359664.6 Ops/sec
structuredClone 141.1 Ops/sec
HTML Preparation code:
AخA
 
1
<script type="module">
2
  import { produce } from 'https://cdn.jsdelivr.net/npm/immer@10.1.1/+esm';
3
  window.immerProduce = produce;
4
</script>
5
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
6
<script src="https://cdn.jsdelivr.net/npm/uuid@10.0.0/dist/index.min.js"></script>
Script Preparation code:
​x
 
const numSiblings = 500;
const depth = 3;
​
state = {
    data: {
        data1: {
            data2: 'test',
            siblings: Array.from({
                length: numSiblings
            }).map(() => ({
                id: crypto.randomUUID()
            })),
            children: Array.from({
                length: depth
            }).map(() => ({
                id: crypto.randomUUID(),
                data: {
                    data1: {
                        data2: 'test',
                        siblings: Array.from({
                            length: numSiblings
                        }).map(() => ({
                            id: crypto.randomUUID()
                        })),
                        children: Array.from({
                            length: depth
                        }).map(() => ({
                            id: crypto.randomUUID(),
                            data: {
                                data1: {
                                    data2: 'test',
                                    siblings: Array.from({
                                        length: numSiblings
                                    }).map(() => ({
                                        id: crypto.randomUUID()
                                    })),
                                    children: Array.from({
                                        length: depth
                                    }).map(() => ({
                                        id: crypto.randomUUID(),
                                        data: {
                                            data1: {
                                                data2: 'test',
                                                siblings: Array.from({
                                                    length: numSiblings
                                                }).map(() => ({
                                                    id: crypto.randomUUID()
                                                })),
                                            },
                                        },
                                    })),
                                },
                            },
                        })),
                    },
                },
            })),
        },
        data3: Array.from({
            length: 1000
        }).map(() => ({})),
    },
};
Tests:

  • produce

     
    const result = immerProduce(state, draft => {
      draft.data.data1.data2 = 'updated';
      for (let i; i < 500; i++) {
        draft.data.data1.siblilngs[i] = { id: uuidv4() };
      }
    })

  • structuredClone

     
    const result = structuredClone(state);
    result.data.data1.data2 = 'updated';
    for (let i; i < 500; i++) {
      result.data.data1.siblilngs[i] = { id: uuidv4() };
    }