Skip to content

Commit 0b9bbc8

Browse files
authored
NodeList.forEach is slow (darkreader#2566)
https://jsben.ch/yZpKU
1 parent 92e4290 commit 0b9bbc8

4 files changed

Lines changed: 13 additions & 10 deletions

File tree

src/inject/dynamic-theme/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,7 @@ function watchForUpdates() {
313313
const inlineStyleElements = root.querySelectorAll(INLINE_STYLE_SELECTOR);
314314
if (inlineStyleElements.length > 0) {
315315
createShadowStaticStyleOverrides(root);
316-
inlineStyleElements.forEach((el) => overrideInlineStyle(el as HTMLElement, filter, fixes.ignoreInlineStyle));
316+
forEach(inlineStyleElements, (el) => overrideInlineStyle(el as HTMLElement, filter, fixes.ignoreInlineStyle));
317317
}
318318
});
319319

@@ -367,7 +367,7 @@ export function removeDynamicTheme() {
367367
});
368368
shadowRootsWithOverrides.clear();
369369
forEach(styleManagers.keys(), (el) => removeManager(el));
370-
document.querySelectorAll('.darkreader').forEach(removeNode);
370+
forEach(document.querySelectorAll('.darkreader'), removeNode);
371371
}
372372

373373
export function cleanDynamicThemeCache() {

src/inject/dynamic-theme/style-manager.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {bgFetch} from './network';
44
import {watchForNodePosition, removeNode, iterateShadowNodes} from '../utils/dom';
55
import {logWarn} from '../utils/log';
66
import {createAsyncTasksQueue} from '../utils/throttle';
7+
import {forEach} from '../../utils/array';
78
import {getMatches} from '../../utils/text';
89
import {FilterConfig} from '../../definitions';
910
import {getAbsoluteURL} from './url';
@@ -55,9 +56,10 @@ export function getManageableStyles(node: Node, results = [] as StyleElement[])
5556
if (shouldManageStyle(node)) {
5657
results.push(node as StyleElement);
5758
} else if (node instanceof Element || node instanceof ShadowRoot || node === document) {
58-
(node as Element)
59-
.querySelectorAll(STYLE_SELECTOR)
60-
.forEach((style: StyleElement) => getManageableStyles(style, results));
59+
forEach(
60+
(node as Element).querySelectorAll(STYLE_SELECTOR),
61+
(style: StyleElement) => getManageableStyles(style, results)
62+
);
6163
iterateShadowNodes(node, (host) => getManageableStyles(host.shadowRoot, results));
6264
}
6365
return results;

src/inject/dynamic-theme/watch.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {push} from '../../utils/array';
1+
import {forEach, push} from '../../utils/array';
22
import {isDefinedSelectorSupported} from '../../utils/platform';
33
import {iterateShadowNodes, createOptimizedTreeObserver, ElementsTreeOperations} from '../utils/dom';
44
import {shouldManageStyle, getManageableStyles, StyleElement} from './style-manager';
@@ -20,8 +20,8 @@ function collectUndefinedElements(root: ParentNode) {
2020
if (!isDefinedSelectorSupported()) {
2121
return;
2222
}
23-
root.querySelectorAll(':not(:defined)')
24-
.forEach((el) => {
23+
forEach(root.querySelectorAll(':not(:defined)'),
24+
(el) => {
2525
const tag = el.tagName.toLowerCase();
2626
if (!undefinedGroups.has(tag)) {
2727
undefinedGroups.set(tag, new Set());

src/inject/utils/dom.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {logWarn} from './log';
22
import {throttle} from './throttle';
3+
import {forEach} from '../../utils/array';
34
import {getDuration} from '../../utils/time';
45

56
interface CreateNodeAsapParams {
@@ -200,12 +201,12 @@ function getElementsTreeOperations(mutations: MutationRecord[]): ElementsTreeOpe
200201
const deletions = new Set<Element>();
201202
const moves = new Set<Element>();
202203
mutations.forEach((m) => {
203-
m.addedNodes.forEach((n) => {
204+
forEach(m.addedNodes, (n) => {
204205
if (n instanceof Element && n.isConnected) {
205206
additions.add(n);
206207
}
207208
});
208-
m.removedNodes.forEach((n) => {
209+
forEach(m.removedNodes, (n) => {
209210
if (n instanceof Element) {
210211
if (n.isConnected) {
211212
moves.add(n);

0 commit comments

Comments
 (0)