Merge pull request #8570 from quarto-dev/bugfix/8567

Website Search - fuse.js performance

Author: dragonstyle

src/resources/projects/website/search/quarto-search.js

@@ -675,6 +675,18 @@ function showCopyLink(query, options) {
 // create the index
 var fuseIndex = undefined;
 var shownWarning = false;
+
+// fuse index options
+const kFuseIndexOptions = {
+  keys: [
+    { name: "title", weight: 20 },
+    { name: "section", weight: 20 },
+    { name: "text", weight: 10 },
+  ],
+  ignoreLocation: true,
+  threshold: 0.1,
+};
+
 async function readSearchData() {
   // Initialize the search index on demand
   if (fuseIndex === undefined) {
@@ -685,17 +697,7 @@ async function readSearchData() {
       shownWarning = true;
       return;
     }
-    // create fuse index
-    const options = {
-      keys: [
-        { name: "title", weight: 20 },
-        { name: "section", weight: 20 },
-        { name: "text", weight: 10 },
-      ],
-      ignoreLocation: true,
-      threshold: 0.1,
-    };
-    const fuse = new window.Fuse([], options);
+    const fuse = new window.Fuse([], kFuseIndexOptions);
 
     // fetch the main search.json
     const response = await fetch(offsetURL("search.json"));
@@ -1226,8 +1228,34 @@ function algoliaSearch(query, limit, algoliaOptions) {
   });
 }
 
-function fuseSearch(query, fuse, fuseOptions) {
-  return fuse.search(query, fuseOptions).map((result) => {
+let subSearchTerm = undefined;
+let subSearchFuse = undefined;
+const kFuseMaxWait = 125;
+
+async function fuseSearch(query, fuse, fuseOptions) {
+  let index = fuse;
+  // Fuse.js using the Bitap algorithm for text matching which runs in
+  // O(nm) time (no matter the structure of the text). In our case this
+  // means that long search terms mixed with large index gets very slow
+  //
+  // This injects a subIndex that will be used once the terms get long enough
+  // Usually making this subindex is cheap since there will typically be
+  // a subset of results matching the existing query
+  if (subSearchFuse !== undefined && query.startsWith(subSearchTerm)) {
+    // Use the existing subSearchFuse
+    index = subSearchFuse;
+  } else if (subSearchFuse !== undefined) {
+    // The term changed, discard the existing fuse
+    subSearchFuse = undefined;
+    subSearchTerm = undefined;
+  }
+
+  // Search using the active fuse
+  const then = performance.now();
+  const resultsRaw = await index.search(query, fuseOptions);
+  const now = performance.now();
+
+  const results = resultsRaw.map((result) => {
     const addParam = (url, name, value) => {
       const anchorParts = url.split("#");
       const baseUrl = anchorParts[0];
@@ -1244,4 +1272,15 @@ function fuseSearch(query, fuse, fuseOptions) {
       crumbs: result.item.crumbs,
     };
   });
+
+  // If we don't have a subfuse and the query is long enough, go ahead
+  // and create a subfuse to use for subsequent queries
+  if (now - then > kFuseMaxWait && subSearchFuse === undefined) {
+    subSearchTerm = query;
+    subSearchFuse = new window.Fuse([], kFuseIndexOptions);
+    resultsRaw.forEach((rr) => {
+      subSearchFuse.add(rr.item);
+    });
+  }
+  return results;
 }