预加载属性 preload 与 prefetch 区别

风灯零乱

已于 2022-02-13 12:33:04 修改

阅读量2.6k

点赞数 1

文章标签： javascript 缓存 http

于 2022-02-13 12:32:39 首次发布

本文链接：https://blog.csdn.net/weixin_41571491/article/details/122907423

版权

原文链接：https://waynegong.cn/posts/40528.html

TLDR:

preload 告诉浏览器立即加载资源;
prefetch 告诉浏览器在空闲时才开始加载资源；
preload、prefetch 仅仅是加载资源，并不会“执行”;
preload、prefetch 均能设置、命中缓存；
正确使用 preload、prefetch 不会导致重复请求；

测试 Demo

waynegongcn/preload-prefetch

优先级

修改 index.html 为如下内容：

<!DOCTYPE html>
<head>
  <link rel="preload" href="/style.css?t=2000" as="style">
  <link rel="preload" href="/main.js?t=2000" as="script">
  <link rel="prefetch" href="/prefetch.css?t=1000" as="style">
  <link rel="prefetch" href="/prefetch.js?t=1000" as="script">
</head>
<body>
  <p>hello world</p>
  <p class="preload">preload</p>
  <p class="prefetch">prefetch</p>
</body>
</html>

node index.js 运行项目，打开调试工具查看 localhost:3000，从 performance 工具得到如下结果：

发现 JS 没有输出，CSS 也没有生效。通过 preload、prefetch 加载的资源并不会立即“执行”；

资源加载完成之前就已经完成了渲染，所以通过这两种方式资源的加载都不会阻塞关键渲染路径；

使用 preload 会将资源优先级设置为 Highest，而使用 prefetch 会将资源优先级设置为 Lowest，Lowest 资源将会在网络空闲时才开始加载。

preload 优先级高于 prefetch；

终止请求与缓存

修改 index.html 为如下内容：

<!DOCTYPE html>
<head>
  <link rel="preload" href="/preload.js?t=3000&ma=3600" as="script">
  <link rel="prefetch" href="/prefetch.js?t=3000&ma=3600" as="script">
</head>
<body>
  <p>hello world</p>
  <script>
    setTimeout(() => {
      if (location.href.indexOf('r') === -1) {
        location.href = `http://localhost:3000?r=${Date.now()}`
      }
    }, 1000)
  </script>
</body>
</html>

得到如下测试结果：

可以发现，在使用 preload、prefetch 加载资源时，如果发生了页面跳转，此时没有完成的请求将会被取消掉；

修改 setTimeout 参数为 4000，再次查看效果：

在资源有设置缓存的情况下，通过 preload 与 prefetch 加载资源缓存均能生效；

重复请求

为了验证使用预加载属性时是否会导致重复的网络请求，修改 index.html 如下：

<!DOCTYPE html>
<head>
  <link rel="preload" href="/main.js?t=3000" as="script">
  <link rel="prefetch" href="/main.js?t=3000" as="script">
</head>
<body>
  <p>hello world</p>
  <script src="/main.js?t=3000"></script>
</body>
</html>

当页面中实际用到的资源与 preload、prefetch 加载的资源重复时，浏览器不会进行重复请求（这个例子中不会出现第三个 main.js 的请求）；

但是相同的资源重复使用 preload、prefetch 属性时将会导致重复下载（main.js 请求了两次，第二次耗时 6s 的请求为 prefetch 发起的）；

风灯零乱

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
预加载属性 preload 与 prefetch 区别

原文链接：https://waynegong.cn/posts/40528.htmlTLDR:preload 告诉浏览器立即加载资源;prefetch 告诉浏览器在空闲时才开始加载资源；preload、prefetch 仅仅是加载资源，并不会“执行”;preload、prefetch 均能设置、命中缓存；正确使用 preload、prefetch 不会导致重复请求；测试 Demowaynegongcn/preload-prefetch优先级修改 index.html 为如下内容：...
复制链接

扫一扫