侧边栏壁纸
  • 累计撰写 84 篇文章
  • 累计创建 35 个标签
  • 累计收到 1 条评论

目 录CONTENT

<link> 元素中 preload和 prefetch 的使用和区别

天明
2023-10-27 / 0 评论 / 0 点赞 / 31 阅读 / 1088 字 / 正在检测是否收录...

preload - 很有必要的资源

preload 也被称为预加载,其用于 link 标签中,可以指明哪些资源是在页面加载完成后即刻需要的,浏览器会在主渲染机制介入前预先加载这些资源,并不阻塞页面的初步渲染

<link rel="preload" href="https://www.jnliok.com/sdk.js" as="script" />
  • preload 使用 as 属性加载的资源将会获得与资源 “type” 属性所拥有的相同的优先级。比如说,preload as=“style” 将会获得比 as=“script” 更高的优先级。
  • 不带 as 属性的 preload 的优先级将会等同于异步请求
  • 该资源一直会从磁盘缓存中读取,JS、CSS 及图片资源都有同样的表现,这主要还是和资源的渲染时机有关,在渲染机制还没有介入前的资源加载不会被内存缓存

prefetch - 可能在将来的页面中使用的资源

prefetch 则表示预提取,告诉浏览器加载下一页面可能会用到的资源,浏览器会利用空闲状态进行下载并将资源存储到缓存中

<link rel="prefetch" href="https://www.jnliok.com/sdk.js" />

使用 prefetch 加载的资源,刷新页面时大概率会从磁盘缓存中读取,如果跳转到使用它的页面,则直接会从磁盘中加载该资源

preload 和 prefetch 的区别

  • preload 是告诉浏览器页面必定需要的资源,浏览器一定会预先加载这些资源
  • prefetch 是告诉浏览器下一个页面可能需要的资源,浏览器不一定会加载这些资源

在VUE SSR生成的页面中,首页的资源均使用preload,而路由对应的资源,则使用prefetch

0

评论区