Preload searchindex.js in background to optimize the search experiences

Signed-off-by: Tao He <linzhu.ht@alibaba-inc.com>

docs/_templates/base.html

@@ -7,12 +7,6 @@
 
 #}
 
-{% block body %}
-  <script>
-    document.body.dataset.theme = "light";
-  </script>
-{% endblock %}
-
 {%- block extrahead %}
 
 {{ super() }}
@@ -54,4 +48,35 @@
   src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
 </script>
 
+<!-- preload searchindex.js -->
+<script src='' id="searchindexjs" type="text/javascript"></script>
+
+{% endblock %}
+
+{% block body %}
+<script>
+  document.body.dataset.theme = "light";
+</script>
+
+<script>
+  function ready(callback) {
+    if (document.readyState!='loading') {
+      // in case the document is already rendered
+      callback();
+    } else if (document.addEventListener) {
+      // modern browsers
+      document.addEventListener('DOMContentLoaded', callback);
+    } else document.attachEvent('onreadystatechange', function() {
+      // IE <= 8
+      if (document.readyState=='complete') {
+        callback();
+      }
+    });
+  }
+
+  ready(function() {
+    let searchindexjs = document.getElementById("searchindexjs");
+    searchindexjs.src = "{{ pathto('searchindex.js', 1) }}";
+  });
+</script>
 {% endblock %}