[whatwg] Fetch Objects and scripts/stylesheets

I was walking with Will about how the browser prioritizes the loading of
scripts and stylesheets. An idea that came up in our conversation was
allowing the user to directly access Fetch objects associated with scripts
and stylesheets. Some examples of how I could see this working:

(1) Allowing the user to specify parameters to Fetch. For example, a user
could say:

<script src="/my.js" params="{'headers':{'myheader':'value'}}"
id="myscript" />

This would allow the user to make any type of request customization that
they could for a direct call to Fetch.

(2) Allowing the user to access the in progress fetch object. For example,
a user could say:

$("myscript").fetch.then(function(resp) { console.log(resp.status); })

Over time, the fetch object might add new functionality that would be
useful to the application developer. For example, I could imagine the fetch
object gaining a way to change HTTP/2 priorities mid-request. Developers
could take advantage of these functions for browser-initiated fetches.

(3) Allowing the user to construct a script or stylesheet from a fetch.
Complex sites often want precise control over when scripts and stylesheets
are loaded and inserted into the DOM. For example, today inserting a
stylesheet blocks the execution of inline script tags. Some sites may know
that this dependency is not needed. If one could construct stylesheets and
scripts directly from a fetch, the author could separate the act of
fetching the stylesheet from inserting into the DOM:

var myfetch = window.fetch(...);
myfetch.then(function(resp) {
  document.body.appendChild(resp.body.asStyleSheet());
});

By calling asStyleSheet, the user could preserve the devtools experience
that exists today while still having complete control over the fetching of
their content.

(4) Giving the user explicit access to initiate fetches from the preload
scanner. One downside of the approach in (3) is that it doesn't take
advantage of the preload scanner to initiate fetches. I could imagine
offering the user an explicit way to trigger a Fetch from the preload
scanner:

<link id="foo" rel="fetch" href="/my.css" />
$('foo').then(function(resp) {
  document.body.appendChild(resp.body.asStyleSheet());
});

What do you guys think about allowing this type of access to the Fetch
object for script and stylesheet loads?

- Ben

Received on Monday, 21 July 2014 16:55:59 UTC