阅读 74

与“预”相关的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为准

关注下面的标签,发现更多相似文章
评论