polyfilling [link rel=preload]
npm install @digitalkaoz/preload-polyfill> it just works...
preload seems the best async loading mechanism today...
https://caniuse.com/#search=preload
some good reads:
* https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
* https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/
* https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/
* https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
```
npm install @digitalkaoz/preload-polyfill
This Polyfill supports the following types:
- [x] js
- [x] css
- [x] font
- [x] image
- [ ] audio (not well tested)
- [ ] document (not well tested)
- [ ] embed (not well tested)
- [ ] fetch (not well tested)
- [ ] object (not well tested)
- [ ] track (not well tested)
- [ ] worker (not well tested)
- [ ] video (not well tested)
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
Integration in your Page
> the polyfill and the invoke script are seperated
`html`
additionally you need an inline script (for browsers that are preload capable, preloading stuff could be faster than loading an external sync script, and you would miss the load event)
`html`
Preloading Stuff
simply use it as follows:
`html`
> beware those are not spec compliant features
critical
those resources will be fetched non blocking, but executed first in order they appear
`html`
fonts
to preload fonts correctly you have to set a name property on the links
`html`
module
those resources will only be fetched if browser understands es6
`html`
nomodule
those resources will only be fetched if browser cant understand es6
`html`
AllScriptsExecuted Event
window.onload can be fired even if not all preloaded scripts are executed, therefore we dispatch an event AllScriptsExecuted which indicates all preloaded stuff is executed too.
``
$ npm start
now visit https://localhost:5000
- [ ] With "disable-cache" the requests will be made twice
- [ ] tests
- [ ] make the execution of the preloaded scripts delay window.onload` so we can get rid of the custom Event (already works in Chrome)
- [ ] media support (https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Including_media)
* https://github.com/jonathantneal/preloadfill
* https://github.com/aFarkas/link-preload