Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Preload the wasm file, to save a few seconds on a slow network #145

Closed
torhovland opened this issue Mar 10, 2021 · 7 comments · Fixed by #147
Closed

Preload the wasm file, to save a few seconds on a slow network #145

torhovland opened this issue Mar 10, 2021 · 7 comments · Fixed by #147

Comments

@torhovland
Copy link

Without preloading, the wasm file isn't being downloaded until requested by the Javascript loader, which of course has to be downloaded first. On a simulated slow 3G network that takes a few seconds. In the example below it takes 21.48 seconds until my app has fully loaded and started running, upon which it fires the request that can be seen on the final line in the screenshot.

image

Preloading can be set up by simply adding one line to the generated index.html file, as in the following example:

<head>
  <link rel="preload" href="/index-43bbc68f2f0a6cd7_bg.wasm" as="fetch" crossorigin>
  <script type="module">import init from '/index-43bbc68f2f0a6cd7.js'; init('/index-43bbc68f2f0a6cd7_bg.wasm');</script>
  <link rel="stylesheet" href="/index-fb9e7ada6a6b5383.css">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity_no="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin="">
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity_no="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin="">
    </script>
</head>

With this enabled, the wasm file starts downloading at the same time as the Javascript, and the app takes a little less time to start running. In my example, the app is ready to fire its request after 19.15 seconds.

image
@thedodd
Copy link
Member

thedodd commented Mar 10, 2021

@torhovland thanks for pointing this out! I remember that block of code, and it should be a very simple fix. A small update for a big win. Would you be interested in opening a PR for this? Code is here. Based on your suggestion, this would be a matter of appending a node to the head element which includes the <link rel="preload" ...> bits. Thoughts?

Just in the name of covering all of our bases, do you think there would ever be a reason not to preload the WASM? I don't see any logical reason at this point, given that such is the entire purpose of loading site. Anything come to mind? Edge cases?

@thedodd
Copy link
Member

thedodd commented Mar 10, 2021

@MartinKavik @rakshith-ravi @philip-peterson anything come to mind for you guys?

@MartinKavik
Copy link
Contributor

It sounds like a very good idea. I'll add it also to MoonZoon and to my Seed app and I'll report when I find some potential problems.

@torhovland
Copy link
Author

Glad you like the idea. I can probably get the PR up tomorrow.

Can't really think of any edge cases. I suppose the worst that can happen is that a browser either doesn't implement preloading, or implements it poorly, such that the wasm gets downloaded twice.

@thedodd
Copy link
Member

thedodd commented Mar 11, 2021

Solid. Yea, it seems like a pretty safe change to make. Sounds great, I'll look for the PR once it is up. Thanks boss.

@MartinKavik
Copy link
Contributor

From the first comment:

<head>
  <link rel="preload" href="/index-43bbc68f2f0a6cd7_bg.wasm" as="fetch" crossorigin>
  <script type="module">import init from '/index-43bbc68f2f0a6cd7.js'; init('/index-43bbc68f2f0a6cd7_bg.wasm');</script>
  <link rel="stylesheet" href="/index-fb9e7ada6a6b5383.css">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin="">
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin="">
    </script>
</head>

I would probably preload both wasm and js at the top of <head>, e.g.:

<head>
  <link rel="preload" href="x.wasm" as="fetch" type="application/wasm" crossorigin>
  <link rel="preload" href="x.js" as="script" type="text/javascript" crossorigin>

But call the init script at the end of <head> or <body>, because your Wasm (app) code may depend on other scripts - in this example you can call some Leaflet methods but it may fail because Leaflet is still loading.

Does it make sense?

@torhovland
Copy link
Author

@MartinKavik Yes, that makes sense. Just tested it 👍

@torhovland torhovland mentioned this issue Mar 11, 2021
Merged
2 tasks
@ForestJohnson ForestJohnson mentioned this issue Oct 14, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Preload WASM and JS torhovland/trunk
3 participants
@torhovland @thedodd @MartinKavik