What are the differences between html preload and prefetch?
Preload and prefetch are both used to request resources in advance so that later resource loading can be quick. It seems that I can interchange the two
<link rel="preload" href="foo.js" as="script">
<link rel="prefetch" href="foo.js">
without noticing anything difference.
What are their differences?
Answer
Addy Osmani wrote an article that goes into the details of this, but the short version is:
preload is a declarative fetch, allowing you to force the browser to make a request for a resource without blocking the document’s onload event.
Prefetch is a hint to the browser that a resource might be needed, but delegates deciding whether and when loading it is a good idea or not to the browser.