⚡ Optimize i18n placeholder replacement using TreeWalker#42
Conversation
Replaced document.querySelectorAll('body *') and nested childNodes
iteration with document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT).
This optimization avoids the creation of an intermediate NodeList and
directly targets text nodes, resulting in a measurable performance
improvement (approx. 23% in benchmarks). It also correctly handles text
nodes that are direct children of the <body> tag.
Co-authored-by: cmuench <211294+cmuench@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
1 participant
The
replaceI18nPlaceholdersfunction was usingdocument.querySelectorAll('body *')to iterate over all elements in the body and then nestedforEachloops to check every child node of every element. This is inefficient for large DOM trees.I have optimized this by using
document.createTreeWalkerwith theNodeFilter.SHOW_TEXTfilter. This allows the browser to directly provide an iterator for all text nodes, skipping unnecessary element visits and avoiding the overhead of creating a staticNodeList.Measured Improvement:
Using a simulated DOM with a depth of 5 and breadth of 4 (approx 1365 elements/text nodes), the benchmark showed an average improvement of 23.32% over 1000 iterations.
The change also improves correctness by including text nodes that are direct children of
<body>, which were previously skipped byquerySelectorAll('body *').PR created automatically by Jules for task 8546079319982121940 started by @cmuench