与“预”相关的link rel属性值简单介绍

preload

link标签rel的属性值，做用：用于声明哪些资源须要在浏览器主渲染机制介入前进行预加载

用法

<link rel="preload" href="styles/main.css" as="style">
复制代码

注：as表明资源类型，指定类型有利于浏览器优化加载策略

prefetch

link标签rel的属性值，做用：用于声明哪些文档和资源在未来有可能被访问，浏览器在空闲时会预先下载它们，当用户访问这些资源时，浏览器直接从缓存返回，须要注意的是：这些资源通常在当前页面不须要（或许至少在页面的初始状态不须要，用户的后续操做才会触发这些资源的加载）

用法

<link rel="prefetch" href="/images/big.jpeg">
<link rel="next" href="2.html">
复制代码

注：next表示可能会跳转的下一个页面

dns-prefetch

link标签rel的属性值，做用：用于声明哪些域名须要预先进行DNS解析，目的是提早进行DNS解析，当请求这个域名的资源时，省去DNS解析这一步，减小整个请求过程的耗时

用法

<link rel="dns-prefetch" href="https://fonts.googleapis.com/">
复制代码

preconnect

link标签rel的属性值，做用：用于声明哪些资源须要预先进行Http连接，目的是减小创建Http连接时所带来的耗时

prerender

link标签rel的属性值，做用：用于声明哪些文档须要被预先下载并在后台进行渲染，目前是当打开这个页面时能够更快的展示

总结

以上是对与“预”相关的link rel属性值的简单介绍，若有错误，欢迎指正，详细内容还请以MDN为准