预加载属性 preload和prefetch的区别

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

2008的肉包

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

阅读量637

点赞数 1

文章标签： servlet 前端 java

本文链接：https://blog.csdn.net/weixin_66496801/article/details/126497622

版权

preload是立即加载资源，prefetch是网络空闲时加载资源。

他们都是加载资源但不会立即执行，所以不会影响关键数据的渲染请求，preload的优先级是Highest，而prefetch的优先级是lowest，preload的优先级大于prefetch，他们在发起请求过程中，如果页面跳转则会取消请求，页面中用到的资源和他们请求的重复时，不会重复请求，但是他们都请求同一份数据时，会造成重复请求，

下面是用法：

<!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>