Optimize DOM traversal in i18n replacement using TreeWalker

google-labs-jules[bot] · cmuench · cmuench · commit 8b5ee63f86cc · 2026-02-26T14:44:36.000+01:00
Replaced `document.querySelectorAll('*')` with `document.createTreeWalker` to avoid creating a large NodeList and improve iteration performance.
Optimized attribute iteration to use a standard for loop instead of `Array.from` to reduce memory allocation.
Added `NodeFilter` to test globals to support TreeWalker testing.

Co-authored-by: cmuench &lt;211294+cmuench@users.noreply.github.com&gt;
diff --git a/tests/utils.test.js b/tests/utils.test.js
@@ -11,6 +11,7 @@ describe('replaceI18nPlaceholders', () => {
     dom = new JSDOM(`<!DOCTYPE html><html><head><title data-i18n="title"></title></head><body><span data-i18n="hello"></span><p>__MSG_world__</p></body></html>`);
     global.document = dom.window.document;
     global.Node = dom.window.Node;
+    global.NodeFilter = dom.window.NodeFilter;
     global.browser = {
       i18n: {
         getMessage: (key) => ({ title: 'Title', hello: 'Hello', world: 'World' }[key])
@@ -21,6 +22,7 @@ describe('replaceI18nPlaceholders', () => {
     dom.window.close();
     delete global.document;
     delete global.Node;
+    delete global.NodeFilter;
     delete global.browser;
   });
   test('replaces placeholders in elements and text nodes', () => {
diff --git a/utils/utils.js b/utils/utils.js
@@ -65,17 +65,24 @@ function replaceI18nPlaceholders() {
   });
 
   // Replace __MSG_...__ patterns in common attributes (e.g., placeholder, title, aria-label)
-  document.querySelectorAll('*').forEach(el => {
-    if (!el.attributes) return;
-    Array.from(el.attributes).forEach(attr => {
-      if (typeof attr.value === 'string' && attr.value.includes('__MSG_')) {
-        const newVal = replaceTokens(attr.value);
-        if (newVal !== attr.value) {
-          el.setAttribute(attr.name, newVal);
+  if (document.documentElement) {
+    const walker = document.createTreeWalker(document.documentElement, NodeFilter.SHOW_ELEMENT);
+    let el = walker.currentNode;
+    while (el) {
+      if (el.hasAttributes()) {
+        for (let i = 0; i < el.attributes.length; i++) {
+          const attr = el.attributes[i];
+          if (typeof attr.value === 'string' && attr.value.includes('__MSG_')) {
+            const newVal = replaceTokens(attr.value);
+            if (newVal !== attr.value) {
+              el.setAttribute(attr.name, newVal);
+            }
+          }
         }
       }
-    });
-  });
+      el = walker.nextNode();
+    }
+  }
 
   // Replace __MSG_...__ patterns in the document title
   if (document.title && document.title.includes('__MSG_')) {
