Run results for: JS: Zip Element.children indexing vs existing array copy

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0

Browser: Firefox 88

Operating system: Linux

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
Array copy	448485.8 Ops/sec
Element.children	5992.1 Ops/sec
Element.children ref	10182.4 Ops/sec

HTML Preparation code:

<div id="container1"></div><div id="container2"></div>

Script Preparation code:

var container1 = document.getElementById("container1");
var container2 = document.getElementById("container2");
var N = 1000;
var a1 = [];
var a2 = [];

for (var i = 0; i < N; ++i) {
  var s1 = document.createElement("span");
  s1.textContent = i.toString();
  container1.appendChild(s1);
  a1.push(s1);
  
  var s2 = document.createElement("span");
  s2.textContent = i.toString();
  container2.appendChild(s2);
  a2.push(s2);
}

Tests:

Array copy
for (var i = 0; i < N; ++i) { var e1 = a1[i]; var e2 = a2[i]; }
Element.children
for (var i = 0; i < N; ++i) { var e1 = container1.children[i]; var e2 = container2.children[i]; }
Element.children ref
var c1 = container1.children; var c2 = container2.children; for (var i = 0; i < N; ++i) { var e1 = c1[i]; var e2 = c2[i]; }

Run results for: JS: Zip Element.children indexing vs existing array copy

Is the speed increase of random array access versus Element.children[i] significant enough to justify the extra memory?

Array copy

Element.children

Element.children ref