参考资料：
preload
<link>元素的rel属性的属性值preload能够让你在你的HTML页面中<head>元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。
试想我们网站使用了一种特殊字体，我们在css里面定义了字体的url。那么直到浏览器开始解析CSS了才会识别出来需要加载这个资源。
如果我们提前让浏览器下载好这个资源呢？那么执行CSS的时候就可以直接用了。就像这样：
<link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
如上所示，我们使用这样的语法：
- rel="preolad"声明这是一个preload
- href指明资源的位置
- as指明资源类型（这是为了让浏览器精确设置优先级，设置正确的CSP、Accept头部）
- crossorigin 指明使用的跨域设置
preload和onload事件
添加preload声明之后，浏览器初次加载的资源变多了，但preload并不会阻塞onload事件的触发。
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.
preload是声明式获取，促使浏览器请求资源但不阻塞document的onload事件。
响应式预加载
link标签还可以接收一个media属性，进行简单的媒体查询。例如这样：
<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
prefetch
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.
prefetch是对浏览器的暗示，暗示将来可能需要某些资源，但由代理决定是否加载以及什么时候加载这些资源。
场景：用户正在登陆页面，登陆成功之后会跳转到首页。我是否可以在登陆页面就去请求首页的资源呢？
<link rel="prefetch" href="main.js">
prefetch跟preload不同在于，用户从A页面进入B页面，preload的会失效，而prefetch的内容可以在B页面使用。
preload VS prefetch
So，什么时候用preload什么时候用prefetch?
| preload | Prefetch | |
|---|---|---|
| 语法 | <link rel="preload" href="bg-image-narrow.png"> |
<link rel="prefetch" href="bg-image-narrow.png" /> |
| 适用场景 | 本页面接下来大概率要使用的资源 | 下个页面的资源。下个页面很可能会去访问 |
| 浏览器支持情况 | 一般 | 较高 |
| 加载时间 | 立即加载（一般而言，跟as有关） | 浏览器闲置的时候才会加载（一般而言） |
浏览器支持如何？
prefetch
可以看到除了safari和Opera Mini，其他浏览器都有较好地支持（全球80.12%，中国66.57%）。
pretetch支持情况
preload
preload支持情况不如prefetch，但已经值得我们使用。
preload支持情况
webpack中的应用
webpack 4.6.0+支持prefetch和preload。
使用preload:
import(/* webpackPreload: true */ 'ChartingLibrary');
使用prefetch
import(/* webpackPrefetch: true */ 'LoginModal');
下面是webpack官方文档对这两种用法的总结：
- A preloaded chunk starts loading in parallel to the parent chunk. A prefetched chunk starts after the parent chunk finish.
- A preloaded chunk has medium priority and instantly downloaded. A prefetched chunk is downloaded in browser idle time.
- A preloaded chunk should be instantly requested by the parent chunk. A prefetched chunk can be used anytime in the future.
- Browser support is different.
网友评论