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: 2 months 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

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

LLMs can make mistakes. Check important info.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:130.0) Gecko/20100101 Firefox/130.0

Browser/OS: Firefox 130 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Map<number, object> - Index Search	1.2 Ops/sec
Map<number, object> - Index Search #2	0.3 Ops/sec
Map<number, object> - Key Search	7108.0 Ops/sec
Array<object> - Index Search	54812.4 Ops/sec
Array<object> - Key Search	3.5 Ops/sec
Array<object> - Key Search #2	2.0 Ops/sec
HTMLCollection - Index Search	4434.1 Ops/sec
HTMLCollection - Key Search	1189.0 Ops/sec
{Array, Map} - Index Search	6043.9 Ops/sec
{Array, Map} - Key Search	7098.0 Ops/sec

Related benchmarks:

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.

Created: 2 months ago by: Registered User

Jump to the latest 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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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