preload、prefetch、preconnect、dns-prefetch ​

preload ​

提高资源加载的优先级，保证资源更早的可用。

<link rel="preload" href="style.css" as="style" />

prefetch ​

用于提前加载未来可能用到的资源。当页面空闲时会去下载该资源，并将其缓存，使用时在 prefetch cache 中读取该资源

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

preconnect ​

当页面要访问资源时，首先要建立连接。所以可以设置 preconnect 提前建立连接，资源请求时就可以直接下载。

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

dns-prefetch ​

提前解析 dns

<link rel="dns-prefetch" href="https://cdn.bootcss.com" />

参考 ​

• MDN：Preload
• MDN：preconnect 标准