Slow search for big swagger file

[gkurzawski]

We face a performance issues related to the search provided by ReDoc. After entering 3 characters website is frozen for few seconds, also the search results are displayed after few seconds.
Is there any way to improve it? I didn't find any search configuration that I would be able to change.

We use ReDoc v2.0.0-rc.18, you can check how it works for us here: http://api-documentation.relayr.io/

[adematte]

same here, we have a large API to document and the search is painfully slow (so is the loading). Pointers on where/what to look for would be great because as it stands we have no idea how to fix/contribute to solve this issue.

[adematte]

it does look like all the components are being instantiated ? as if there was no lazy loading so all the content is being generated at first load.

[RomanHotsiy]

This happens in the moment when scrollbar is rendered. This looks to cause major relayout by browser. One of the reasons is the number of elements on the page.

I will investigate it further when I have time.

[dpc]

@RomanHotsiy

This is a really painful problem. It renders the whole site pretty much unusable.

I just fixed a similar issue in a similar (related even, considering how similar the code looks?) project and now I need to get it fixed here.

There I fixed it by delaying highlighting and re-rendering until the user stops typing. At least it makes everything usable, so the user can finish typing first, and browser has one unnoticeable pause, and not just hangs completely.

I paste the patch verbatim:

@@ -8,6 +8,7 @@
   var highlightOpts = { element: 'span', className: 'search-highlight' };
 
   var index = new lunr.Index();
+  var lastUpdate = new Date();
 
   index.ref('id');
   index.field('title', { boost: 10 });
@@ -36,12 +37,15 @@
     $('#input-search').on('keyup', search);
   }
 
+
   function search(event) {
-    unhighlight();
     searchResults.addClass('visible');
 
     // ESC clears the field
-    if (event.keyCode === 27) this.value = '';
+    if (event.keyCode === 27) {
+      this.value = ''
+      delayedFn.call(this, unhighlight);
+    };
 
     if (this.value) {
       var results = index.search(this.value).filter(function(r) {
@@ -54,18 +58,32 @@
           var elem = document.getElementById(result.ref);
           searchResults.append("<li><a href='#" + result.ref + "'>" + $(elem).text() + "</a></li>");
         });
-        highlight.call(this);
+        delayedFn.call(this, highlight);
       } else {
+        delayedFn.call(this, unhighlight);
         searchResults.html('<li></li>');
         $('.search-results li').text('No Results Found for "' + this.value + '"');
       }
     } else {
-      unhighlight();
+      delayedFn.call(this, unhighlight);
       searchResults.removeClass('visible');
     }
   }
 
+  function delayedFn(f) {
+    lastUpdate = new Date();
+
+    setTimeout((function() {
+      var currentTime = new Date();
+      const timeSinceLastUpdateMs = currentTime.getTime() - lastUpdate.getTime();
+      if (2500 < timeSinceLastUpdateMs) {
+        f.call(this);
+      }
+    }).bind(this), 3000);
+  }
+
   function highlight() {
+    unhighlight();
     if (this.value) content.highlight(this.value, highlightOpts);
   }

I investigated this project, and the search handling looks very similar, but there are these react parts, so I'm not sure if this is going to work. I'm not really a fronted dev, so I would appreciate some help. :)

[dpc]

Hi @RomanHotsiy . Just noticed you've landed a fix and I reaaaaly appreciate it! 🎉

I can confirm that it does make things significantly better. The site I'm testing went from unusable to quite OK. However it is still somewhat slow while typing.

While investigating using Chrome performance tuner, I can see that it is mostly sitting in rendering. Relevant screenshot - while I'm typing it sits here pretty much at all times. I'm quite sure it's the change of highlighting on this huge page that is taking so much time.

Just trying to be helpful. I know this is an Open Source project, so no pressure. Thanks for improving it!