From a7294214116ab5ec0e111b37c00cc7e2c16b4e1b Mon Sep 17 00:00:00 2001 From: Timo Tijhof Date: Sun, 14 Jul 2024 20:19:25 +0100 Subject: [PATCH] HTML Reporter: Faster "Hide passed" toggling on large test suites 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 a few milliseconds on the q4000 demo overall from 10ms to 5ms (Chrome), and seems to move some unattributed costs to outside the critical path. --- src/core/reporters/HtmlReporter.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/core/reporters/HtmlReporter.js b/src/core/reporters/HtmlReporter.js index 86a40791a..fdeff09b5 100644 --- a/src/core/reporters/HtmlReporter.js +++ b/src/core/reporters/HtmlReporter.js @@ -259,10 +259,10 @@ export default class HtmlReporter { // the original urlParams in makeUrl() this.hidepassed = value; const tests = this.elementTests; - 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 : ''; @@ -274,13 +274,18 @@ export default class HtmlReporter { } } - for (const hiddenTest of this.hiddenTests) { - tests.removeChild(hiddenTest); + // Optimization: Avoid for-of iterator overhead. + for (let i = 0; i < this.hiddenTests.length; i++) { + tests.removeChild(this.hiddenTests[i]); } } else { - while (this.hiddenTests.length) { - tests.appendChild(this.hiddenTests.shift()); + // Optimization: Avoid Array.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 < this.hiddenTests.length; i++) { + tests.appendChild(this.hiddenTests[i]); } + this.hiddenTests.length = 0; } window.history.replaceState(null, '', updatedUrl); } else {