web性能优化,使用preload和prefetch预加载资源

文章发布于2020年08月05日 15:12, 归类于: 前端

参考文档:

在线测试:https://www.eoway.cn/show/demo/preload.html

preload

preload 是声明式的资源获取请求方式,请求资源时不会阻塞windows的onload事件。

使用场景

用于提前加载一些需要的依赖,当前页面所需的脚本、样式、图片等资源。

使用方法

<!-- 预加载 font -->
<link rel="preload" as="font" href="test.woff">

<!-- 预加载 style.css-->
<link rel="preload" as="style" href="style.css">
<!-- 使用 style.css-->
<link rel="stylesheet" href="style.css">

<!-- 加载 script -->
<link rel="preload" as="script" href="main.js">
<!-- 执行 script -->
<script src="main.js"></script>

加载完成让样式表马上生效:

<link rel="preload" href="test.css" onload="this.rel=stylesheet">

加载完成可执行回调:

<link rel="preload" as="script" href="test.js" onload="preloadFinished()">

加载跨域的文件,crossorigin 属性:

<link rel="preload" as="font" crossorigin href="test.woff">

检查浏览器是否支持preload

function preloadSupported (){
  var link = document.createElement('link');
  var relList = link.relList;
  if (!relList || !relList.supports)
  return false;
  return relList.supports('preload');
};

Preload 的 as 属性,指明资源类型

<link rel="preload" as="script" href="test.js">
<link rel="preload" as="style" href="test.css">
<link rel="preload" as="image" href="test.jpg">
  1. 设置了 as 的加载优先级比没有设置 as 的加载优先级高。
  2. 不带 “as” 属性的 preload 的优先级将会等同于异步请求。
  3. 不使用明确的 “as” 属性,将会导致二次获取。
  4. 没有设置 as,可能不会加载。

浏览器提示,preload必须要设置as

示例说明

例子1:

  1. 未使用preload 预加载: 浏览器解析css-解析到某字体样式-加载字体样式-渲染

  2. 使用preload 预加载: 预加载字体样式-浏览器解析css-解析到某字体样式-渲染

例子2:

以下案例使用了windows谷歌浏览器测试。

<head>
  <link rel="preload" href="http://oss.eoway.cn/upload/files/2020-08-05-10-37-03-rn102.jpg" as="image">
</head>

<body>
  <button id="wrap">点击添加图片</button>

  <script>
    var wrap = document.getElementById('wrap')
    wrap.addEventListener('click', function () {
      var img = document.createElement("img");
      img.src = "http://oss.eoway.cn/upload/files/2020-08-05-10-37-03-rn102.jpg";
      body.appendChild(img);
    })
  </script>
</body>
  1. 打开页面时,preload 预加载一张图片。

  1. 当点击按钮时,在body内添加一张图片,新添加的图片地址与preload预加载的地址相同,浏览器不会重复加载这张图片。

  1. 点击继续添加图片,发现img标签在发起新的请求获取图片。而其他浏览器(Microsoft Edge浏览器)则使用已预加载好的图片。

关闭网络,点击继续添加图片,因为没网络,请求失败,无法显示新添加图片。而其他浏览器则使用已预加载好的图片,正常显示图片。

  1. 谷歌浏览器,尝试不设置 as="image",结果是浏览器没有预加载这张图片,尽量设置 as 。
 <link rel="preload" href="http://oss.eoway.cn/upload/files/2020-08-05-10-37-03-rn102.jpg">

但是,加载javascript时,不需要设置 as 却能预加载。

prefetch

prefetch 跟 preload 不同,它的作用是告诉浏览器未来可能会使用到的某个资源,浏览器就会在闲时去加载对应的资源,若能预测到用户的行为,比如懒加载,点击到其它页面等则相当于提前预加载了需要的资源。它的用法跟 preload 是一样的:

<!-- 使用空闲时间,预加载其他页面的资源 -->
<link rel="prefetch" as="script" href="detail.js">

使用场景

用户在首页浏览商品列表,此时可以使用 prefetch 预加载商品详情页需要的资源,跳转到商品详情页时可以直接使用预加载的资源。

转载请注明来源:《 web性能优化,使用preload和prefetch预加载资源》- rojerYong's Blog

文章链接:https://www.eoway.cn /article/1596611544.html

如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。

--END--
上一篇:微信小程序通过map组件获取中心点高精度经纬度以及解决ios系统map组件moveToLocation无效问题 下一篇:前端实现多主题