link

HTML 外部资源链接元素 <link> 规定了当前文档与外部资源的关系。

有几个关键属性：

• rel（relationship）：链接方式与包含它的文档之间的关系，例如：stylesheet，preload 等；
• href：资源链接；
• as：规定资源类型，当 rel 设置为 preload 或 prefetch 可用；

stylesheet 样式表

加载样式表

<link href="main.css" rel="stylesheet" />

preload 预加载

页面加载时立即加载指定的资源，以便在 后续 渲染过程中能够更快地获取所需内容。

<link rel="preload" href="./index.js" as="script" />

警告

如果这些资源在页面加载好之后一定时间内（一般是 3 ~ 5 秒）仍未被使用，浏览器会发出警告，认为该资源不应该预加载。

prefetch 预请求

浏览器应该在空闲时间内提前下载指定的资源，以便在 将来 访问该资源时能够更快地加载。

<link rel="prefetch" href="./index.js" as="script" />

预请求是把将来可能用到的资源提前加载，请确保资源被使用的可能性，不然会浪费流量。