Benchmark: Large nested Arrays: Immutable.js vs spread operator

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

function initArray(W = 1000, H = 1000, C = 100) {
  let array = Array(H);

  for (let y = 0; y < H; y++) {
    array[y] = Array(W);
    for (let x = 0; x < W; x++) {
      array[y][x] = Array(C);
      for (let z = 0; z < C; z++) {
        array[y][x][z] = _.random(0, 255);
      }
    }
  }
  return array;
}

function createRandomPoint(w, h, c) {
  return {
    x: _.random(0, w - 1),
    y: _.random(0, h - 1),
    z: _.random(0, c - 1),
    value: _.random(0, 255)
  };
};

function updateWithSpread(prevImg) {
  const { x, y, z, value } = createRandomPoint(W, H, C);
  const newChannel = [
    ...prevImg[y][x].slice(0, z),
    value,
    ...prevImg[y][x].slice(z + 1)
  ];
  const newCol = [
    ...prevImg[y].slice(0, x),
    newChannel,
    ...prevImg[y].slice(x + 1)
  ];
  const newImg = [...prevImg.slice(0, y), newCol, ...prevImg.slice(y + 1)];
  return newImg;
};

var W = 500, H = 500, C = 50;

var bigArray = initArray(W, H, C);
var bigImmutable = Immutable.fromJS(bigArray);

Tests:

Spread operator
bigArray = updateWithSpread(bigArray);
Immutable.js deep List
const {x,y,z,value} = createRandomPoint(W, H, C); bigImmutable = bigImmutable.setIn([y,x,z], value);
Mutating the array in place
const {x,y,z,value} = createRandomPoint(W, H, C); bigArray[y][x][z] = value;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread operator
Immutable.js deep List
Mutating the array in place

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 5 months ago)

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

Browser/OS: Chrome 117 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Spread operator	163514.0 Ops/sec
Immutable.js deep List	449999.7 Ops/sec
Mutating the array in place	1256128.0 Ops/sec

Large nested Arrays: Immutable.js vs spread operator (version: 2)

Comparing performance of: Spread operator vs Immutable.js deep List vs Mutating the array in place

Created: 4 years ago by: Registered User

Jump to the latest result

Spread operator

Immutable.js deep List

Mutating the array in place

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A