preload 和 prefetch 区别

最新推荐文章于 2024-04-01 10:01:13 发布

亮学长

最新推荐文章于 2024-04-01 10:01:13 发布

阅读量589

点赞数 11

文章标签：前端

本文链接：https://blog.csdn.net/formylovetm/article/details/136200823

版权

本文介绍了preload和prefetch这两种HTML5技术，分别用于当前页面关键资源的预加载和未来可能使用资源的预获取，以优化首屏加载速度和后续页面加载体验。

摘要由CSDN通过智能技术生成

preload 和 prefetch 都是用来提高网站性能的技术，但它们在具体的应用场景和效果上有一些区别：

preload：preload 是一种在页面加载过程中提前加载关键资源的方法。通过在页面头部以 <link rel="preload"> 的方式引入资源，告诉浏览器哪些资源是页面加载过程中需要优先加载的。preload 适用于当前页面需要的资源，可以帮助加快关键资源的加载速度，提高首屏渲染性能。
prefetch：prefetch 是一种在浏览器空闲时提前加载未来可能需要的资源的方法。通过在页面头部以 <link rel="prefetch"> 的方式引入资源，告诉浏览器哪些资源是未来页面可能会使用到的，可以在浏览器空闲时提前加载这些资源，以减少未来页面加载时的延迟。prefetch 适用于未来可能会被访问到的资源，可以在一定程度上提高用户的后续页面加载速度。

总的来说，preload 是针对当前页面的关键资源进行提前加载的，而 prefetch 则是针对未来可能会被访问到的资源提前加载。正确使用 preload 和 prefetch 可以有效地优化页面性能和用户体验。

preload 资源在当前页面使用，会优先加载
prefetch 资源在未来页面使用，空闲时加载

<head>
  <!-- 当前页面使用 -->
  <link rel="preload" href="style.css" as="style" />
  <link rel="preload" href="main.js" as="script" />

  <!-- 未来页面使用 提前加载 比如新闻详情页 -->
  <link rel="prefetch" href="other.js" as="script" />

  <!-- 当前页面 引用css -->
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- 当前页面 引用js -->
  <script src="main.js" defer></script>
</body>

亮学长

关注

11
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
preload 和 prefetch 区别

的方式引入资源，告诉浏览器哪些资源是未来页面可能会使用到的，可以在浏览器空闲时提前加载这些资源，以减少未来页面加载时的延迟。prefetch 适用于未来可能会被访问到的资源，可以在一定程度上提高用户的后续页面加载速度。总的来说，preload 是针对当前页面的关键资源进行提前加载的，而 prefetch 则是针对未来可能会被访问到的资源提前加载。的方式引入资源，告诉浏览器哪些资源是页面加载过程中需要优先加载的。preload 适用于当前页面需要的资源，可以帮助加快关键资源的加载速度，提高首屏渲染性能。
复制链接

扫一扫