Benchmark: Search Performance: Map<number, object> vs Array<object> vs HTMLCollection vs {Array, Map}

Search Performance: Map<number, object> vs Array<object> vs HTMLCollection vs {Array, Map} (version: 11)

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

Comparing performance of: Map<number, object> - Index Search vs Map<number, object> - Index Search #2 vs Map<number, object> - Key Search vs Array<object> - Index Search vs Array<object> - Key Search vs Array<object> - Key Search #2 vs HTMLCollection - Index Search vs HTMLCollection - Key Search vs {Array, Map} - Index Search vs {Array, Map} - Key Search

Created: one year ago by: Registered User

Jump to the latest result

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]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.5

View result in a separate tab

Test name	Executions per second
Map<number, object> - Index Search	1.7 Ops/sec
Map<number, object> - Index Search #2	0.5 Ops/sec
Map<number, object> - Key Search	18566.5 Ops/sec
Array<object> - Index Search	93410.1 Ops/sec
Array<object> - Key Search	9.6 Ops/sec
Array<object> - Key Search #2	4.0 Ops/sec
HTMLCollection - Index Search	11.6 Ops/sec
HTMLCollection - Key Search	1001.7 Ops/sec
{Array, Map} - Index Search	11550.1 Ops/sec
{Array, Map} - Key Search	9976.3 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Related benchmarks: