HTML Reporter: Faster "Hide passed" toggling on large test suites

Krinkle · Krinkle · commit b13ade0fd7c3 · 2025-01-19T20:25:33.000Z
Optimize the hidepassed click handler for large test suites by avoiding internal function call overhead for the iterator, as well as copying cost for the array. Shaves off ~100ms milliseconds on the q4000 demo 1.65s to 1.5s (Chrome, CPU throttle 6x), and seems to defer some unattributed costs to outside the critical path. Cherry-picked from a729421 (3.0.0-dev).
diff --git a/src/html-reporter/html.js b/src/html-reporter/html.js
@@ -196,10 +196,9 @@ const stats = {
       config[field.name] = value || false;
       let tests = id('qunit-tests');
       if (tests) {
-        const length = tests.children.length;
-        const children = tests.children;
-
         if (field.checked) {
+          const length = tests.children.length;
+          const children = tests.children;
           for (let i = 0; i < length; i++) {
             const test = children[i];
             const className = test ? test.className : '';
@@ -211,13 +210,18 @@ const stats = {
             }
           }
 
-          for (const hiddenTest of hiddenTests) {
-            tests.removeChild(hiddenTest);
+          // Optimization: Avoid `for-of` iterator overhead.
+          for (let i = 0; i < hiddenTests.length; i++) {
+            tests.removeChild(hiddenTests[i]);
           }
         } else {
-          while (hiddenTests.length) {
-            tests.appendChild(hiddenTests.shift());
+          // Optimization: Avoid `while (arr.length) arr.shift()` which would mutate the array many times.
+          // As of Chrome 126, HTMLElement.append(...hiddenTests) is still slower than
+          // calling appendChild in a loop.
+          for (let i = 0; i < hiddenTests.length; i++) {
+            tests.appendChild(hiddenTests[i]);
           }
+          hiddenTests.length = 0;
         }
       }
       window.history.replaceState(null, '', updatedUrl);

Original file line number	Diff line number	Diff line change
`@@ -196,10 +196,9 @@ const stats = {`
`196`	`196`	`config[field.name] = value \|\| false;`
`197`	`197`	`let tests = id('qunit-tests');`
`198`	`198`	`if (tests) {`
`199`		`- const length = tests.children.length;`
`200`		`- const children = tests.children;`
`201`		`-`
`202`	`199`	`if (field.checked) {`
	`200`	`+ const length = tests.children.length;`
	`201`	`+ const children = tests.children;`
`203`	`202`	`for (let i = 0; i < length; i++) {`
`204`	`203`	`const test = children[i];`
`205`	`204`	`const className = test ? test.className : '';`
`@@ -211,13 +210,18 @@ const stats = {`
`211`	`210`	`}`
`212`	`211`	`}`
`213`	`212`
`214`		`- for (const hiddenTest of hiddenTests) {`
`215`		`- tests.removeChild(hiddenTest);`
	`213`	+ // Optimization: Avoid `for-of` iterator overhead.
	`214`	`+ for (let i = 0; i < hiddenTests.length; i++) {`
	`215`	`+ tests.removeChild(hiddenTests[i]);`
`216`	`216`	`}`
`217`	`217`	`} else {`
`218`		`- while (hiddenTests.length) {`
`219`		`- tests.appendChild(hiddenTests.shift());`
	`218`	+ // Optimization: Avoid `while (arr.length) arr.shift()` which would mutate the array many times.
	`219`	`+ // As of Chrome 126, HTMLElement.append(...hiddenTests) is still slower than`
	`220`	`+ // calling appendChild in a loop.`
	`221`	`+ for (let i = 0; i < hiddenTests.length; i++) {`
	`222`	`+ tests.appendChild(hiddenTests[i]);`
`220`	`223`	`}`
	`224`	`+ hiddenTests.length = 0;`
`221`	`225`	`}`
`222`	`226`	`}`
`223`	`227`	`window.history.replaceState(null, '', updatedUrl);`