Three.js: Preload/prefetch in examples
Description of the problem
Pretty sure that examples not teach us for the best practice and should be fixed.
We downloading resources only after Three.js was loaded.
We should investigate this problem and fix it. HTTP/2 support parallel download.
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
https://developers.google.com/web/fundamentals/performance/http2
munsocket
All 16 comments
It's kind of a complexity tradeoff between having the examples be simple to understand and having them be fully optimized as if they were standalone apps. If you load textures with THREE.TextureLoader, you have to wait until the three.js script is loaded. If you load them any other way, it is more complicated. An example or two of preloading might be good, but I don't know if I'd rewrite every example this way.
donmccurdy
on 11 May 2020
@donmccurdy but it is worth next to nothing to add those link tags
makc
on 11 May 2020
You mean it costs next to nothing, correct?
For images, ok. I'm not sure if those tags are going to work with 3D models if browsers don't recognize the media types, but would be curious to find out.
donmccurdy
on 11 May 2020
I`d think as=fetch should work for the models:
makc
on 11 May 2020
Missed that option, nice! Ok, that does sound pretty easy to include.
donmccurdy
on 11 May 2020
Probably for images also “fetch”, because I get warnings in console.
munsocket
on 11 May 2020
@donmccurdy can I push this into all examples? It's working.
Here an example.
munsocket
on 20 May 2020
@munrocket how do you collect the list of files it loads? with some headless browser script?
makc
on 20 May 2020
No, just jimp + jimp/blit
munsocket
on 20 May 2020
I mean the files you are going to PR here. There could be gltf files, bin files, obj files, jpeg files, dds files, etc in every example, and with hundreds of them it would suck to go over every example by hand
makc
on 21 May 2020
@munrocket could you make a PR that updates just one example (for now) preloading both textures and models? Let's see what that looks like.
donmccurdy
on 21 May 2020
@makc doesn’t thought about this yet.
Here two questions:
How different browser support this?
Doesn't they download resources twice?
Second question is tricky, nobody will see any error.
munsocket
on 21 May 2020
what I see here is firefox not reporting the preload, but when actual request happens, it loads fast. chrome does load it twice, and it complains if the rquest does not happen within short time after the page was loaded.
makc
on 21 May 2020
munsocket
on 25 May 2020
could you make a PR that updates just one example (for now) preloading both textures and models? Let's see what that looks like.
here goes #19483 / live link - note the glb file is now the 1st thing that gets loaded:
makc
on 28 May 2020
As we checked in #19483 it's a good opportunity to improve loading speed (~200ms on simple project and even more on a complex one). But we blocked by bug in webkit, I make a bug report here https://bugs.webkit.org/show_bug.cgi?id=213683
munsocket
on 16 Jul 2020
Related issues
ghost
·
3Comments
boyravikumar
·
3Comments
yqrashawn
·
3Comments
Bandit
·
3Comments
makc
·
3Comments
Most helpful comment
It's kind of a complexity tradeoff between having the examples be simple to understand and having them be fully optimized as if they were standalone apps. If you load textures with
THREE.TextureLoader, you have to wait until the three.js script is loaded. If you load them any other way, it is more complicated. An example or two of preloading might be good, but I don't know if I'd rewrite every example this way.