Optimize initial page load time

Author: amykyta3

docs/index.html

@@ -14,7 +14,7 @@
     <link rel="stylesheet" href="css/theme.css?v=2.4.0">
     <link rel="icon" type="image/png" href="favicon.png">
     <script>
-        var BUILD_TS = 1652848867;
+        var BUILD_TS = 1654150608;
     </script>
     <script async src="https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js"></script>
     <script type="text/x-mathjax-config">
@@ -26,8 +26,8 @@
     </script>
     <script src="js/BigInteger.min.js?v=2.4.0" type="text/javascript"></script>
     <script src="js/sha1.js?v=2.4.0" type="text/javascript"></script>
-    <script src="js/data.js?ts=1652848867" type="text/javascript"></script>
-    <script src="search/bkt_index.js?ts=1652848867" type="text/javascript"></script>
+    <script src="js/data.js?ts=1654150608" type="text/javascript"></script>
+    <script src="search/bkt_index.js?ts=1654150608" type="text/javascript"></script>
     <script src="js/ral.js?v=2.4.0" type="text/javascript"></script>
     <script src="js/main.js?v=2.4.0" type="text/javascript"></script>
     <script src="js/nav.js?v=2.4.0" type="text/javascript"></script>

docs/js/content_search.js

@@ -200,7 +200,7 @@ class ContentSearch {
                 }
             }
         }
-        take_a_break();
+        await take_a_break();
         if(abortSignal.aborted) return;
 
         // Sort results by match score

docs/js/data.js

@@ -50,9 +50,36 @@ function onPageLoad() {
 
     window.onpopstate = onPopState;
     window.onkeydown = onKeyDownMain;
-    init_tree();
+
+    // Determine what page id will be loaded
+    var url = new URL(window.location.href);
+    var path = url.searchParams.get("p", path);
+    var parsed_path = parse_path(path);
+    var id;
+    if(parsed_path == null) {
+        id = 0;
+    } else {
+        id = parsed_path[0];
+    }
+
+    // Prepare content for initial page load
+    ral_expand_all_bigint_pass1(id);
+    var deferred_sb_work;
+    deferred_sb_work = init_tree_pass1(id);
     init_sb_resizer();
-    load_page_via_url();
+
+    // Load content
+    load_page_via_url().then(() => {
+        // finish remaining initialization after page load
+        // defer it to the next animation frame
+        // TODO: Figure out a better way to defer these to after page rendering
+        // requestAnimationFrame and other methods don't seem to work
+        setTimeout(() => {
+            ral_expand_all_bigint_pass2();
+            init_tree_pass2(deferred_sb_work);
+        }, 100);
+    });
+
     init_index_edit();
     userHooks.onPageLoad();
 }
@@ -321,6 +348,10 @@ function isDescendant(parent, child) {
     return(false);
 }
 
+async function take_a_break(){
+    await new Promise(r => setTimeout(r, 1));
+}
+
 //==============================================================================
 // Compatibility Workarounds
 //==============================================================================

docs/js/main.js

@@ -16,7 +16,6 @@ async function load_page(id) {
             init_reg_value();
             init_radix_buttons();
         }
-        //MathJax.Hub.Queue(["Typeset", MathJax.Hub, main_el]);
         MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
         userHooks.onContentLoad();
     })
@@ -42,47 +41,42 @@ async function fetch_page_content(id){
     return awaitable;
 }
 
-function load_page_via_url(){
+async function load_page_via_url(){
     // An event triggered such that the page should be loaded based on the URL
     var prev_id = CurrentID;
 
     var url = new URL(window.location.href);
     var path = url.searchParams.get("p", path);
-    if(path == null){
-        // No path specified. Default to root node
+    var parsed_path = parse_path(path);
+    var new_path;
+    if(parsed_path == null) {
+        // Bad path. Discard it
+        new_path = "";
         CurrentID = 0;
     } else {
-        // URL contains a hier path
-        var parsed_path = parse_path(path);
-        var new_path;
-        if(parsed_path == null) {
-            // Bad path. Discard it
-            new_path = "";
-            CurrentID = 0;
-        } else {
-            // Path is good.
-            var id, idx_stack;
-            id = parsed_path[0];
-            idx_stack = parsed_path[1];
-            apply_idx_stack(id, idx_stack);
-
-            // Recompute the path in case it needs to be cleaned up
-            new_path = get_path(id);
-            CurrentID = id;
-        }
+        // Path is good.
+        var id, idx_stack;
+        id = parsed_path[0];
+        idx_stack = parsed_path[1];
+        apply_idx_stack(id, idx_stack);
 
-        if(path != new_path){
-            // Path was sanitized. Patch URL
-            url.searchParams.set("p", new_path);
-            window.history.replaceState({}, "", url.toString())
-        }
+        // Recompute the path in case it needs to be cleaned up
+        new_path = get_path(id);
+        CurrentID = id;
     }
+
+    if(path != new_path){
+        // Path was sanitized. Patch URL
+        url.searchParams.set("p", new_path);
+        window.history.replaceState({}, "", url.toString())
+    }
+
     if(prev_id != CurrentID) {
-        load_page(CurrentID).then(() => {
+        await load_page(CurrentID).then(() => {
             select_tree_node();
             expand_to_tree_node();
             open_tree_node(CurrentID);
-            scroll_to_tree_node(CurrentID);
+            scroll_to_tree_node();
             refresh_title();
             refresh_target_scroll();
         });
@@ -118,7 +112,7 @@ function load_page_via_path(path, url_hash){
             select_tree_node();
             expand_to_tree_node();
             open_tree_node(CurrentID);
-            scroll_to_tree_node(CurrentID);
+            scroll_to_tree_node();
             refresh_url(url_hash);
             refresh_title();
             refresh_target_scroll();
@@ -140,7 +134,7 @@ function onClickNodeLink(ev) {
         select_tree_node();
         expand_to_tree_node();
         open_tree_node(id);
-        scroll_to_tree_node(id);
+        scroll_to_tree_node();
         refresh_url();
         refresh_title();
     });
@@ -165,7 +159,7 @@ function load_parent_page(){
         select_tree_node();
         expand_to_tree_node();
         open_tree_node(id);
-        scroll_to_tree_node(id);
+        scroll_to_tree_node();
         refresh_url();
         refresh_title();
     });

docs/js/nav.js

@@ -76,6 +76,10 @@ function parse_path(path){
     //  [id, idx_stack]
     // Any invalid indexes in the path are fixed silently
 
+    if(path == null){
+        return null;
+    }
+
     // Decompose the path
     var pathparts = path.split(".");
     var segments = [];
@@ -345,3 +349,38 @@ function toBigInt(str) {
         return(bigInt(str));
     }
 }
+
+function ral_expand_bigint(id){
+    // Check if RAL entry has been converted yet
+    if(typeof RALIndex[id].offset !== 'string') return;
+
+    // Needs conversion from base-16 string --> bigInt object
+    RALIndex[id].offset = bigInt(RALIndex[id].offset, 16);
+    RALIndex[id].size = bigInt(RALIndex[id].size, 16);
+    if('stride' in RALIndex[id]) RALIndex[id].stride = bigInt(RALIndex[id].stride, 16);
+
+    if(is_register(id)) {
+        for(var i=0; i<RALIndex[id].fields.length; i++){
+            RALIndex[id].fields[i].reset = bigInt(RALIndex[id].fields[i].reset, 16);
+        }
+    }
+}
+
+function ral_expand_all_bigint_pass1(first_id){
+    // RALIndex contains strings that represent integers that need to be expanded
+    // to bigInt objects
+
+    // To keep initial page load fast, only expand ids in the linage of first_id
+    var ids = get_ancestors(first_id);
+    ids.push(first_id);
+    for(var i=0; i<ids.length; i++){
+        ral_expand_bigint(ids[i]);
+    }
+}
+
+function ral_expand_all_bigint_pass2(){
+    // Next, asynchronously process all others
+    for(var i=0; i<RALIndex.length; i++){
+        ral_expand_bigint(i);
+    }
+}

docs/js/ral.js

@@ -160,11 +160,6 @@ async function start_search(query) {
     }
 }
 
-
-async function take_a_break(){
-    await new Promise(r => setTimeout(r, 1));
-}
-
 function add_search_result(text_segments, node_id, idx_stack=null, anchor="", content_preview=null){
     // text_segments is an array of segments that should/shouldn't be highlighted
     // All odd segments are highlighted via <mark> tag.
@@ -240,7 +235,7 @@ function open_search_result(result_idx){
         select_tree_node();
         expand_to_tree_node();
         open_tree_node(result.node_id);
-        scroll_to_tree_node(result.node_id);
+        scroll_to_tree_node();
         refresh_url(url_hash);
         refresh_title();
         refresh_target_scroll();

docs/js/search.js

@@ -5,14 +5,60 @@ var SBResizeState = {};
 SBResizeState.old_width = 0;
 SBResizeState.start_x = 0;
 
-function init_tree() {
+function init_tree_pass1(first_id){
+    // initialize the bare-minimum of the sidebar tree in order to display the
+    // first_id page
+
+    // array of required ID lineage
+    var id_chain = get_ancestors(first_id);
+    id_chain.push(first_id);
+
+    // deferred sidebar work for 2nd pass
+    // array of pairs: [cdiv, id]
+    var deferred_sb_work = [];
+
     var el = document.getElementById("_SBTree");
-    RootNodeIds.forEach(function(id) {
-        add_tree_node(el, id);
-    });
+    for(var i=0; i<RootNodeIds.length; i++){
+        add_tree_nodes_in_chain(el, RootNodeIds[i], id_chain, deferred_sb_work);
+    };
+
+    return deferred_sb_work;
+}
+
+function init_tree_pass2(deferred_sb_work){
+    for(var i=0; i<deferred_sb_work.length; i++){
+        var cdiv = deferred_sb_work[i][0];
+        var cid = deferred_sb_work[i][1];
+        add_tree_node_recursive(cdiv, cid);
+    }
+}
+
+function add_tree_nodes_in_chain(parent_el, id, id_chain, deferred_sb_work){
+    var node = RALIndex[id];
+    var cdiv;
+
+    cdiv = create_tree_node(parent_el, id);
+    if(node.children.length > 0){
+        if((id_chain.length != 0) && (id_chain[0] == id)){
+            // node is in chain. Keep going
+            id_chain.shift();
+            for(var i=0; i<node.children.length; i++){
+                var cid = node.children[i];
+                add_tree_nodes_in_chain(cdiv, cid, id_chain, deferred_sb_work);
+            }
+        } else {
+            // node is not in chain, but has children. Defer them
+            for(var i=0; i<node.children.length; i++){
+                var cid = node.children[i];
+                deferred_sb_work.push([cdiv, cid]);
+            }
+        }
+    }
 }
 
-function add_tree_node(parent_el, id){
+function create_tree_node(parent_el, id) {
+    // Creates a single tree node.
+    // If has children, returns the div element that shall contain children
     var node = RALIndex[id];
 
     var div;
@@ -38,7 +84,7 @@ function add_tree_node(parent_el, id){
             txt += "[]";
         }
         link.innerHTML = txt;
-    }else{
+    } else {
         link.innerHTML = node.name;
     }
     div.appendChild(link);
@@ -52,15 +98,28 @@ function add_tree_node(parent_el, id){
         cdiv.className = "node-children";
         parent_el.appendChild(cdiv);
 
-        for(var i=0; i<node.children.length; i++){
-            add_tree_node(cdiv, node.children[i]);
-        }
+        return cdiv;
     } else {
         // is leaf node
         div.classList.add("leaf");
+
+        return null;
+    }
+}
+
+function add_tree_node_recursive(parent_el, id){
+    var node = RALIndex[id];
+    var cdiv;
+
+    cdiv = create_tree_node(parent_el, id);
+    if(node.children.length > 0){
+        for(var i=0; i<node.children.length; i++){
+            add_tree_node_recursive(cdiv, node.children[i]);
+        }
     }
 }
 
+
 function select_tree_node() {
     var id = CurrentID;
     // Changes the selected tree node
@@ -100,8 +159,8 @@ function expand_to_tree_node() {
     }
 }
 
-function scroll_to_tree_node(id) {
-    var node_el = document.getElementById("_SBNode" + id);
+function scroll_to_tree_node() {
+    var node_el = document.getElementById("_SBNode" + CurrentID);
     var tree_el = document.getElementById("_SBTreeContainer");
 
     var node_rect = node_el.getBoundingClientRect();