Run results for: Search Performance: Map<number, object> vs Array<object> vs HTMLCollection vs {Array, Map}

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15

Browser: Safari 16

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 months ago

Test name	Executions per second
Map<number, object> - Index Search	0.4 Ops/sec
Map<number, object> - Index Search #2	1.0 Ops/sec
Map<number, object> - Key Search	758.0 Ops/sec
Array<object> - Index Search	849.1 Ops/sec
Array<object> - Key Search	0.5 Ops/sec
Array<object> - Key Search #2	3.6 Ops/sec
HTMLCollection - Index Search	742.6 Ops/sec
HTMLCollection - Key Search	504.9 Ops/sec
{Array, Map} - Index Search	613.9 Ops/sec
{Array, Map} - Key Search	758.7 Ops/sec

Script Preparation code:

var theMap = new Map();
var theArr = [];
var theHTML = document.createElement("ol");
var ArrAndMap = { order:[], data:new Map() };
var result;

var count = 10000;
var seeds = [];
let template = {
  class: "this is something",
  content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
  size: 33
}

// Map<number, object> setting
for(let i = 0; i <= count; i++) {
  let valueObj = { ...template };
  valueObj.index = i;
  theMap.set(i, valueObj);
}

// Array<object> setting
for(let i = 0; i <= count; i++) {
  let valueObj = { ...template };
  valueObj.key = i;
  theArr.splice(i, 0, valueObj);
}

// HTMLCollection setting
for(let i = 0; i <= count; i++) {
  const item = document.createElement("li");
  item.id = i;
  item.className = template.class;
  item.textContent = template.content;
  item.dataset.size = template.size;
  theHTML.insertAdjacentElement('beforeend', item);
}

// {Array, Map} setting
for(let i = 0; i <= count; i++) {
  ArrAndMap.order.splice(i, 0, i);
  ArrAndMap.data.set(i, { ...template});
}

// seed
for(let i = 0; i <= count; i++) {
  seeds[i] = Math.floor(Math.random() * count);
}

Tests:

Map<number, object> - Index Search
for(let i = 0; i <= count; i++) { for (let [key, value] of theMap) { if (value.index === seeds[i]) { result = theMap.get(key); break; } } }
Map<number, object> - Index Search #2
for(let i = 0; i <= count; i++) { result = [...theMap.values()][[...theMap.values()].map(function(o) { return o.index; }).indexOf(seeds[i])]; }
Map<number, object> - Key Search
for(let i = 0; i <= count; i++) { result = theMap.get(seeds[i]); }
Array<object> - Index Search
for(let i = 0; i <= count; i++) { result = theArr[seeds[i]]; }
Array<object> - Key Search
for(let i = 0; i <= count; i++) { result = theArr.find(o => o.key === seeds[i]); }
Array<object> - Key Search #2
for(let i = 0; i <= count; i++) { result = theArr[theArr.map(function(o) {return o.key; }).indexOf(seeds[i])]; }
HTMLCollection - Index Search
for(let i = 0; i <= count; i++) { result = theHTML.children[seeds[i]]; }
HTMLCollection - Key Search
for(let i = 0; i <= count; i++) { result = theHTML.children.namedItem(seeds[i]); }
{Array, Map} - Index Search
for(let i = 0; i <= count; i++) { result = ArrAndMap.data.get(ArrAndMap.order[seeds[i]]); }
{Array, Map} - Key Search
for(let i = 0; i <= count; i++) { result = ArrAndMap.data.get(seeds[i]); }

Run results for: Search Performance: Map<number, object> vs Array<object> vs HTMLCollection vs {Array, Map}

Compare the performance of the process of searching and getting specific data from large data sets.

Map<number, object> - Index Search

Map<number, object> - Index Search #2

Map<number, object> - Key Search

Array<object> - Index Search

Array<object> - Key Search

Array<object> - Key Search #2

HTMLCollection - Index Search

HTMLCollection - Key Search

{Array, Map} - Index Search

{Array, Map} - Key Search