Specify processing model in terms of Fetch

[annevk]

I thought we had a dedicated issue for this in this repository, but I can't find it.

#63 and #66 are related though.

[jyasskin]

@yoavweiss, is this on your plate, perhaps as whatwg/html#4115?

[yoavweiss]

Prefetch processing is on my plate: whatwg/fetch#881 and whatwg/html#4115. I plan to update the HTML PR this week.

[yoavweiss]

/cc @noamr

[noamr]

My current action plan based on this discussion:

• Define <link rel=prefetch> as something that applies only to the requests coming from the current origin (including workers, service-workers, etc and not limited to current document)
• Reference nav-speculation/prefetch as the ongoing effort for cross-origin navigation prefetch (described here as prenavigate)
• Defer cross-origin subresource prefetching to a later stage

This would make a clear distinction between preload & prefetch:

• preload is high-priority, same-document
• prefetch is low-priority, same-origin

[noamr]

I've researched how implementations handle prefetch today. I can spec something but because implementations do things very differently, it would be better to reach a consensus first.

• WebKit fetches the link immediately, and saves the result in the link memory cache. It does not send error/load events. Something along the lines of:

const cache = new WeakMap();
function prefetch(link) {
   for (const l of document.querySelectorAll('link')) {
      if (cache.has(l)
         return cache.get(l);
   }
   cache.set(link, fetch(link.href));
}

• Gecko saves the prefetches in a queue, and pops it one-by-one after document load. It also fires load and error events, and coalesces same-URL requests:

const prefetchQueue = [];
let prefetching = false;
function prefetchNext() {
     prefetching = true;
     if (!prefetchQueue.length)
         return;
     const links = prefetchQueue.pop();
     fetch(links[0].href, {internalOptions: { priority: 'low' }})
         .then(() => links.forEach(l => .dispatchEvent('load')))
         .catch(() =>  links.forEach(l => .dispatchEvent('error')))
}

function prefetch(link) {
    for (const p of prefetchQueue) {
       if (p[0].href === link.href) {
         p.push(link);
         return;
       }
    }

  window.prefetchQueue.push([link]);
  if (prefetching)
     prefetchNext();
}

window.addEventListener('load', prefetchNext);

• Chromium fetches the resource immediately but in "low priority". It fires load / error events. Prefetched resources stay in HTTP cache for 5 minutes without requiring validation.

function prefetch(link) {
   fetch(link.href, { internalOptions: { priority: 'low', remainInCacheWithoutValidationMinutes: 5 }})
       .then(() => { link.dispatch('load') })
       .catch(() => { link.dispatch('error') })
}

So to summarize:

User-Agent	Coalesce requests ("memory cache")	Wait until document load	Fire events	Remain in cache without validation
Chromium	No	No	Yes	Yes
Gecko	Yes	Yes	Yes	No
WebKit	Yes	No	No	No

I believe that we should reach a consensus about making the above table interoperable - otherwise prefetch means something different based on which user-agent serves the document.