HTML5中的预加载

在前端开发过程中，我们经常需要加载其他域名下的资源，如script加载js脚本，link加载css样式表，img加载图片，js脚本中import引入其他域名下的模块，css样式表中@import引入其他域名下的样式表等等

而html解析是同步阻塞加载，解析到特定的网址资源的时候会停止解析对网络资源进行获取并解析，直至完毕才会向下解析

现在已经有了部分方式达到异步加载，如script标签中使用async或defer、图片懒加载等，但随着项目的增大，外部资源的获取速度仍然是影响用户体验重要的影响因素

在HTML5中新增了多种方式的预加载配置，每页可以有多个预加载配置项，浏览器会根据这些预加载的配置，在浏览器空闲时将每个唯一请求排队进行预获取(异步方式)，当用户访问其中一个预加载的资源时，可以从浏览器的缓存中快速提供

预加载配置目前仅支持link标签中的资源(通过href属性指定资源地址)，不支持a标签或form等其他标签中的资源

预加载配置的资源地址只支持为http或https协议，不支持其他协议的资源

预加载配置的资源地址没有同源限制

预加载的资源请求中包含Referer标头，内容为提供该资源的预加载配置的页面，并非实际使用该资源的页面

预加载的资源请求中会附带特殊标头用来区分预加载请求和普通请求

firefox附带“X-moz: prefetch”标头
Chrome附带“X-Purpose： prefetch” 或 “Purpose： prefetch” 标头
这个请求头不是标准化的，在未来的版本中可能会发生变化

当用户在预获取某些内容时单击链接或启动任何类型的页面加载时，预加载将停止，并且预加载配置信息都将被丢弃。如果预加载文档已部分下载，则以加载的部分文档仍将存储在缓存中(前提是服务器发送了“Accept-Ranges: bytes”响应标头)，当用户继续预加载或实际访问改资源时，将获取资源的剩余部分

目前支持的预加载方式：

dns-prefetch：DNS预解析
modulepreload：js模块预加载
preconnect：预连接
prefetch：预加载资源(下一个可能的访问页面中会用到的资源)
preload：预加载资源(当前访问页面中会用到的资源)，必须配合as属性指定资源类型
prerender：预加载下一个页面中的所有资源(下一个可能的访问页面的所有资源)
    目前已作废，但为了兼容浏览器仍支持，但不推荐使用
    可能会由于判断用户下一个可能访问的页面错误而浪费用户的带宽

预加载配置

可以指定为HTTP标头

Link: <https://example.com>; rel=预加载方式

也可以在页面head标签中使用link标签指定

<link rel="预加载方式" href="资源url" />

当资源启用跨域资源共享(CORS)时必须添加crossorigin单属性确保预加载的CORS模式与资源请求匹配，如果资源为字体文件，由于各种原因，必须使用匿名模式CORS获取这些资源

<link rel="preconnect" href="https://example.com" crossorigin />

dns-prefetch：值为域名，向浏览器提示后续可能需要来自目标域名下的资源，浏览器可通过预先对该域名执行DNS解析来改善用户体验

<link rel="dns-prefetch" href="https://example.com" />
当浏览器请求其他域名下的资源时，必须先将该跨源域名进行DNS解析，然后浏览器才能发出请求
对于打开与许多第三方的连接的网站，DNS解析延迟会显著降低加载性能

<meta http-equiv="x-dns-prefetch-control" content="off">
在服务器端发送 "X-DNS-Prefetch-Control:on" 标头打开和关闭DNS预读取

modulepreload：值为js脚本网址，向浏览器提示预先获取该脚本并加载其依赖资源，将其存储在文档的模块映射中，以便稍后评估

preconnect：值为域名，向浏览器提示后续可能需要来自目标域名下的资源，浏览器预启动与该域名的连接来改善用户体验

<link rel="preconnect" href="https://example.com" />
预连接预先执行部分或全部握手（HTTP的DNS + TCP，HTTPS的DNS+TCP+TLS）

prefetch：值为具体的资源网址，向浏览器提示用户下次访问的网址或下次访问网址中会用到的资源

<link rel="prefetch" href="https://example.com" />
旨在预加载将在下一次导航/页面加载中使用的资源，对当前页面没有用
如果值为一个html网址，则会自动解析html并预加载其中的网络资源
浏览器会给prefetch资源一个比preload资源更低的优先级

preload： 值为具体的资源网址，向浏览器提示当前页面后续会用到的资源，必须配合 as 属性指定资源类型

<link rel="preload" href="https://example.com/style.css" as="style" />
as属性指定资源类型，可能的值：
    audio：音频文件
    document：由<frame>或<iframe>嵌入的HTML文档
    embed：<embed>元素中的资源
    fetch：由fetch或XHR请求的资源
    font：字体文件
    image：图像文件
    object：<object>元素中的资源。
    script：Js文件
    style：CSS样式表文件
    track：WebVTT(字幕)文件
    worker：worker
    video：视频文件
可选属性：
    type：指定资源的MIME类型，浏览器根据知否支持该类型来决定是否预加载此资源
    media：媒体查询，可以进行响应式预加载
        media="(max-width: 600px)"
        表示页面宽度不超过600px时才进行预加载

不会加载和执行脚本，而只是计划以更高的优先级下载和缓存脚本

prerender：向浏览器提示用户可能需要目标资源才能进行下一次导航