Add prefetch links for search results.

When a search returns 5 or less results, add <link rel="prefetch"> elements
to the header, so the browser will have the pages cached if the user open
any of them.

Author: ayosec

lib/ffdocs/view/javascript/front-search.js

@@ -87,6 +87,8 @@ class FrontSearchInput extends SearchInput {
       results.appendChild(dt);
       results.appendChild(dd);
     }
+
+    this.afterUpdate();
   }
 
   // Extract item data from the links in the <nav>.

lib/ffdocs/view/javascript/nav-search.js

@@ -76,6 +76,8 @@ class NavSearchInput extends SearchInput {
         elem.classList.add("hidden");
       }
     }
+
+    this.afterUpdate();
   }
 
   selectionItemsQuery() {

lib/ffdocs/view/javascript/search.js

@@ -1,6 +1,8 @@
 class SearchInput {
 
   constructor(elem) {
+    this.prefetchLinks = new Set();
+
     elem.addEventListener("input", () => {
       this.update(elem.value.trim().toLowerCase());
     });
@@ -60,7 +62,7 @@ class SearchInput {
   }
 
   moveSelection(direction) {
-    let elems = document.querySelectorAll(this.selectionItemsQuery())
+    let elems = document.querySelectorAll(this.selectionItemsQuery());
 
     if(elems.length === 0) { return; }
 
@@ -101,4 +103,37 @@ class SearchInput {
     url.searchParams.set("q", query);
     history.replaceState({}, "", url.href);
   }
+
+  afterUpdate() {
+    if (this.prefetchLastTimeout !== undefined) {
+      clearTimeout(this.prefetchLastTimeout);
+      this.prefetchLastTimeout = undefined;
+    }
+
+    // If the search shows ≤ 5 items, add a prefetch header after 200ms.
+
+    let elems = document.querySelectorAll(this.selectionItemsQuery());
+
+    if(elems.length === 0 || elems.length > 5) {
+      return;
+    }
+
+    const prefetchLinks = this.prefetchLinks;
+    this.prefetchLastTimeout = setTimeout(function() {
+      for (const elem of elems) {
+        const a = elem.matches("a") ? elem : elem.querySelector("a[href]");
+        if (a !== null) {
+          const href = a.href;
+          if (!prefetchLinks.has(href)) {
+            prefetchLinks.add(href);
+
+            const link = document.createElement("link");
+            link.rel = "prefetch";
+            link.href = href;
+            document.head.appendChild(link);
+          }
+        }
+      }
+    }, 200);
+  }
 }