[whatwg] Script preloading

Kyle Simpson getify at gmail.com
Wed Jul 10 08:55:36 PDT 2013

> ******************************
> Summary:
> 1. `preload` attribute on <script> tags in markup, `preload` property on script elements created by code. In either case, its presence tells the browser not to execute the script once it finishes loading.
> 2. `onpreload` event fired on any script which has `preload` attribute or property on it at the time its (pre)loading finishes (and execution is thus suppressed). Otherwise, not fired.
> 3. To "execute" a script that was preloaded in code, remove the `preload` attribute or property from the element, which signals to the browser that it's OK to execute it now. If you remove it before loading finishes, the browser acts as if it was never marked as "preload" and continues as normal. If you remove it after preloading finishes, the browser is free to execute that script ASAP now.
> 4. If you are doing markup-only loading, you signal to a "preloaded" script that its eligible for execution by putting a matching selector to it into a `fulfills` attribute on another script element. If a script finishes loading and it's already been signaled by another `fulfills`, it will run right away. Otherwise, it'll wait until some script executes that has a matching `fulfills` attribute on it.

A variation on my proposal which gives a little more symmetry between markup-based loading and script-based loading:

Instead of removing the `preload` attribute/property to signal it's OK to execute now, I just set another property on it called `fulfilled`. That attribute/property, if present at time of preload completion, means "it's OK, go ahead an execute", or if added after preload, says "go ahead and execute it now ASAP."

The symmetry is that in markup-only usage, I use `fulfills` on another <script> tag (because with markup only I can't modify another script element) to signal that the preloaded script element is now "fulfilled". But in script-based loading, I can just signal the preloaded script element directly that it's fulfilled now by setting a `fulfilled` property on it.

I like that even a lot better than deleting/removing the `preload` attribute/property.


More information about the whatwg mailing list