Improve JS loading sequence

_includes/head.html

@@ -61,7 +61,7 @@
 
   <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
 
-  <script async
+  <script defer
     src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.15.0,npm/bootstrap@4/dist/js/bootstrap.min.js"></script>
 
   {% include js-selector.html %}

_includes/js-selector.html

@@ -18,8 +18,8 @@
 
 {% if page.math %}
   <!-- MathJax -->
-  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-  <script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+  <script defer src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 {% endif %}
 
 {% if jekyll.environment == 'production' %}

_includes/mermaid.html

@@ -3,26 +3,27 @@
 -->
 <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
 <script>
+  $(function() {
+    let initTheme = "default";
 
-  let initTheme = "default";
+    if ($("html[mode=dark]").length > 0
+      || ($("html[mode]").length == 0
+        && window.matchMedia("(prefers-color-scheme: dark)").matches ) ) {
+      initTheme = "dark";
+    }
 
-  if ($("html[mode=dark]").length > 0
-    || ($("html[mode]").length == 0
-      && window.matchMedia("(prefers-color-scheme: dark)").matches ) ) {
-    initTheme = "dark";
-  }
+    let mermaidConf = {
+      theme: initTheme  /* <default|dark|forest|neutral> */
+    };
 
-  let mermaidConf = {
-    theme: initTheme  /* <default|dark|forest|neutral> */
-  };
 
-  /* Markdown converts to HTML */
-  $("pre").has("code.language-mermaid").each(function() {
-    let svgCode = $(this).children().html();
-    $(this).addClass("unloaded");
-    $(this).after(`<div class=\"mermaid\">${svgCode}</div>`);
+    /* Markdown converts to HTML */
+    $("pre").has("code.language-mermaid").each(function() {
+      let svgCode = $(this).children().html();
+      $(this).addClass("unloaded");
+      $(this).after(`<div class=\"mermaid\">${svgCode}</div>`);
+    });
+
+    mermaid.initialize(mermaidConf);
   });
-
-  mermaid.initialize(mermaidConf);
-
 </script>

assets/js/_commons/back-to-top.js

@@ -1,18 +1,21 @@
 /*
 Reference: https://bootsnipp.com/snippets/featured/link-to-top-page
 */
-$(window).scroll(function() {
-  if ($(this).scrollTop() > 50
-      && $("#sidebar-trigger").css("display") === "none") {
-    $("#back-to-top").fadeIn();
-  } else {
-    $("#back-to-top").fadeOut();
-  }
-});
 
 $(function() {
+  $(window).scroll(function() {
+    if ($(this).scrollTop() > 50 &&
+      $("#sidebar-trigger").css("display") === "none") {
+      $("#back-to-top").fadeIn();
+    } else {
+      $("#back-to-top").fadeOut();
+    }
+  });
+
   $("#back-to-top").click(function() {
-    $("body,html").animate({scrollTop: 0}, 800);
+    $("body,html").animate({
+      scrollTop: 0
+    }, 800);
     return false;
   });
-});
+});