Run results for: Perf difference when using looping over collection vs creating a cached projection for that access pattern (small array)

Intent is to measure the benefit of creating multiple "cache projections" (for lack of a better name) when using Redux Toolkit's EntityAdapter. It already handles everything in an "entities" object (keys are ids, values are the entity) and manages a list of ids separately. If we want to access a specific item based on the value of another key on that object, we are forced to loop through all the entities (either with Object.keys, Object.values, a for..in, or using the ids list) to find it. The solution tested here is to maintain another object that's simply a mapping between the key we want to look for and the id of the corresponding object for fast access. It is obviously faster, but by how much?

Run details:

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

Browser: Chrome 97

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
finding item using find with Object.values	256127.8 Ops/sec
finding item using find with Object.keys	250206.2 Ops/sec
looping with for..in	275812.9 Ops/sec
finding item using find without Object.values (accessing entities using the ids array)	309266.5 Ops/sec
using the itemIdByUuid "projection" we created	1719342.4 Ops/sec

Script Preparation code:

function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

var ids = [];
var uuids = [];
var entities = {};
var itemIdByUuid = {};
for(let i = 0; i < 25; i++) {
  const obj = {
    id: `id${i}`,
    uuid: crypto.randomUUID(),
    foo: "bar",
    bar: "foo",
  };
  
  entities[obj.id] = obj;
  ids.push(obj.id);
  itemIdByUuid[obj.uuid] = obj.id;
}

Tests:

finding item using find with Object.values
const randomUUID = uuids[Math.floor(Math.random() * uuids.length)]; const itemMatchingSomeUUID = Object.values(entities).find((obj) => obj.uuid === randomUUID);
finding item using find with Object.keys
const randomUUID = uuids[Math.floor(Math.random() * uuids.length)]; const itemMatchingSomeUUID = Object.keys(entities).find((id) => entities[id].uuid === randomUUID);
looping with for..in
const randomUUID = uuids[Math.floor(Math.random() * uuids.length)]; let itemMatchingSomeUUID = null; for(const id in entities) { if(entities[id].uuid === randomUUID) { itemMatchingSomeUUID = entities[id]; break; } }
finding item using find without Object.values (accessing entities using the ids array)
const randomUUID = uuids[Math.floor(Math.random() * uuids.length)]; const itemMatchingSomeUUID = ids.map((id) => entities[id]).find((obj) => obj.uuid === randomUUID);
using the itemIdByUuid "projection" we created
const randomUUID = uuids[Math.floor(Math.random() * uuids.length)]; const itemMatchingSomeUUID = entities[itemIdByUuid[randomUUID]];

Run results for: Perf difference when using looping over collection vs creating a cached projection for that access pattern (small array)

finding item using find with Object.values

finding item using find with Object.keys

looping with for..in

finding item using find without Object.values (accessing entities using the ids array)

using the itemIdByUuid "projection" we created