Remove DOM mutation overhead from fog-of-war prefetch (#12731)

* fix(perf): remove DOM mutation overhead from fog-of-war prefetch

In a real-world website I am testing this against, this reduces the fog-of-war's blocking JS during SPA transitions from 100ms to 1.2ms.

---------

Co-authored-by: Jason Miller <[email protected]>

Author: brophdawg11

.changeset/moody-comics-exist.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Optimize Lazy Route Discovery path discovery to favor a single `querySelectorAll` call at the `body` level instead of many calls at the sub-tree level

contributors.yml

@@ -79,6 +79,7 @@
 - david-crespo
 - dcblair
 - decadentsavant
+- developit
 - dgrijuela
 - DigitalNaut
 - dmitrytarassov

packages/react-router/lib/dom/ssr/fog-of-war.ts

@@ -116,14 +116,23 @@ export function useFogOFWarDiscovery(
       if (!path) {
         return;
       }
-      let url = new URL(path, window.location.origin);
-      if (!discoveredPaths.has(url.pathname)) {
-        nextPaths.add(url.pathname);
+      // optimization: use the already-parsed pathname from links
+      let pathname =
+        el.tagName === "A"
+          ? (el as HTMLAnchorElement).pathname
+          : new URL(path, window.location.origin).pathname;
+      if (!discoveredPaths.has(pathname)) {
+        nextPaths.add(pathname);
       }
     }
 
     // Register and fetch patches for all initially-rendered links/forms
     async function fetchPatches() {
+      // re-check/update registered links
+      document
+        .querySelectorAll("a[data-discover], form[data-discover]")
+        .forEach(registerElement);
+
       let lazyPaths = Array.from(nextPaths.keys()).filter((path) => {
         if (discoveredPaths.has(path)) {
           nextPaths.delete(path);
@@ -150,43 +159,14 @@ export function useFogOFWarDiscovery(
       }
     }
 
-    // Register and fetch patches for all initially-rendered links
-    document.body
-      .querySelectorAll("a[data-discover], form[data-discover]")
-      .forEach((el) => registerElement(el));
+    let debouncedFetchPatches = debounce(fetchPatches, 100);
 
+    // scan and fetch initial links
     fetchPatches();
 
     // Setup a MutationObserver to fetch all subsequently rendered links/form
-    let debouncedFetchPatches = debounce(fetchPatches, 100);
-
-    function isElement(node: Node): node is Element {
-      return node.nodeType === Node.ELEMENT_NODE;
-    }
-
-    let observer = new MutationObserver((records) => {
-      let elements = new Set<Element>();
-      records.forEach((r) => {
-        [r.target, ...r.addedNodes].forEach((node) => {
-          if (!isElement(node)) return;
-          if (node.tagName === "A" && node.getAttribute("data-discover")) {
-            elements.add(node);
-          } else if (
-            node.tagName === "FORM" &&
-            node.getAttribute("data-discover")
-          ) {
-            elements.add(node);
-          }
-          if (node.tagName !== "A") {
-            node
-              .querySelectorAll("a[data-discover], form[data-discover]")
-              .forEach((el) => elements.add(el));
-          }
-        });
-      });
-      elements.forEach((el) => registerElement(el));
-      debouncedFetchPatches();
-    });
+    // It just schedules a full scan since that's faster than checking subtrees
+    let observer = new MutationObserver(() => debouncedFetchPatches());
 
     observer.observe(document.documentElement, {
       subtree: true,