Static HTML: faster page load by preloading statefile (#2887)

fonsp · Apr 11, 2024 · 27c4234 · 27c4234
1 parent ad6306d
commit 27c4234
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 5 deletions.
diff --git a/frontend/editor.html b/frontend/editor.html
@@ -45,6 +45,8 @@
 
     <!-- This script will be enabled by JS after the notebook has initialized to prevent taking up bandwidth during the initial load. -->
     <script type="text/javascript" id="MathJax-script" integrity="sha384-4kE/rQ11E8xT9QgrCBTyvenkuPfQo8rXYQvJZuMgxyPOoUfpatjQPlgdv6V5yhUK" crossorigin="anonymous" not-the-src-yet="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-svg-full.js" async></script>
+
+    <meta name="pluto-insertion-spot-preload">
 </head>
 
 <body class="loading no-MαθJax">

diff --git a/frontend/editor.js b/frontend/editor.js
@@ -91,7 +91,10 @@ const get_statefile =
     window?.pluto_injected_environment?.custom_get_statefile?.(read_Uint8Array_with_progress, without_path_entries, unpack) ??
     (async (launch_params, set_statefile_download_progress) => {
         set_statefile_download_progress("indeterminate")
-        const r = await fetch(new Request(launch_params.statefile, { integrity: launch_params.statefile_integrity ?? undefined }))
+        const r = await fetch(new Request(launch_params.statefile, { integrity: launch_params.statefile_integrity ?? undefined }), {
+            // @ts-ignore
+            priority: "high",
+        })
         set_statefile_download_progress(0.2)
         const data = await read_Uint8Array_with_progress(r, (x) => set_statefile_download_progress(x * 0.8 + 0.2))
         const state = without_path_entries(unpack(data))

diff --git a/frontend/index.html b/frontend/index.html
@@ -34,6 +34,8 @@
 
     <link rel="prefetch" href="editor.css">
     <link rel="prerender" href="editor.html">
+
+    <meta name="pluto-insertion-spot-preload">
 </head>
 
 <body class="nosessions">

diff --git a/src/notebook/Export.jl b/src/notebook/Export.jl
@@ -56,12 +56,15 @@ end
 
 const _insertion_meta = """<meta name="pluto-insertion-spot-meta">"""
 const _insertion_parameters = """<meta name="pluto-insertion-spot-parameters">"""
+const _insertion_preload = """<meta name="pluto-insertion-spot-preload">"""
 
 
 inserted_html(original_contents::AbstractString; 
     meta::AbstractString="",
     parameters::AbstractString="",
+    preload::AbstractString="",
 ) = replace_at_least_once(
+    replace_at_least_once(
     replace_at_least_once(original_contents, 
         _insertion_meta => 
         """
@@ -74,8 +77,22 @@ inserted_html(original_contents::AbstractString;
     $(parameters)
     $(_insertion_parameters)
     """
+),
+_insertion_preload => 
+"""
+$(preload)
+$(_insertion_preload)
+"""
 )
 
+function prefetch_statefile_html(statefile_js::AbstractString)
+    if length(statefile_js) < 300 && startswith(statefile_js, '"') && endswith(statefile_js, '"') && !startswith(statefile_js, "\"data:")
+        """\n<link rel="preload" as="fetch" href=$(statefile_js) crossorigin>\n"""
+    else
+        ""
+    end
+end
+
 """
 See [PlutoSliderServer.jl](https://github.com/JuliaPluto/PlutoSliderServer.jl) if you are interested in exporting notebooks programatically.
 """
@@ -114,7 +131,9 @@ function generate_html(;
     </script>
     """
 
-    inserted_html(cdnified; meta=header_html, parameters)
+    preload = prefetch_statefile_html(statefile_js)
+
+    inserted_html(cdnified; meta=header_html, parameters, preload)
 end
 
 function replace_at_least_once(s, pair)
@@ -246,5 +265,7 @@ function generate_index_html(;
     </script>
     """
 
-    inserted_html(cdnified; meta, parameters)
+    preload = prefetch_statefile_html(featured_sources_js)
+
+    inserted_html(cdnified; meta, parameters, preload)
 end
diff --git a/test/Notebook.jl b/test/Notebook.jl
@@ -574,12 +574,15 @@ end
         @test_notebook_inputs_equal(nb, result, false)
 
 
-        filename = "howdy.jl"
-
+        filename = "\"howdy.jl\""
         export_html = Pluto.generate_html(nb; notebookfile_js=filename)
         @test occursin(filename, export_html)
         @test_throws ArgumentError Pluto.embedded_notebookfile(export_html)
 
+        filename = "\"some where/thing.plutostate\""
+        export_html = Pluto.generate_html(nb; statefile_js=filename)
+        @test occursin("""pluto_statefile = "some where/""", export_html)
+        @test occursin("""<link rel="preload" as="fetch" href="some where/""", export_html)
 
         export_html = Pluto.generate_index_html()
         @test occursin("</html>", export_html)