前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >性能优化必知preload 和 prefetch

性能优化必知preload 和 prefetch

作者头像
前端黑板报
发布2021-03-24 13:49:31
1.3K0
发布2021-03-24 13:49:31
举报
文章被收录于专栏:前端黑板报

点击上方蓝色字体,关注我们

今天我们来探索一下前端资源的一些指令以及它们如何来提高网站性能的。你应该听过 preload 和 prefetch,但这次我们想深挖它们之间的不同以及如何受益于它们。它们允许开发者优化资源的传递时间、缩短往返次数等。

preload:

preload 是一个新的 Web 标准,在页面生命周期中提前加载你指定的资源,同时确保在浏览器的主要渲染机制启动之前。这样就可以保证了其不会阻止浏览器的渲染并提前加载资源以此来提高性能。通常使用 preload 是用来加载图片、CSS、JavaScript和字体文件。preload 的语法和加载 CSS 类似:

代码语言:javascript
复制
<link rel="stylesheet" href="styles/main.css"> // 加载CSS

除了要把 rel 改为 preload ,同时还要指定 as 属性,下面是一个简单的例子:

代码语言:javascript
复制
<head>
  <meta charset="utf-8">
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">

  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>

  <script src="main.js" defer></script>
</body>

使用 as 来指定资源的类型可以使浏览器:

  • 更加精确地确定资源加载的优先级。
  • 将其存储在缓存中以备将来使用,并在适当时重用资源。
  • 将正确的内容安全策略应用于资源。
  • 为其设置正确的 Accept 请求标头。

preload 支持如下资源的加载:

audio、document、embed、fetch、font、image、object、script、style、track、worker、video(浏览器暂未实现)

若你加载了一个 CORS 开启的资源,必须要加上 crossorigin 属性:

代码语言:javascript
复制
<link rel="preload" href="https://example.com/fonts/font.woff" as="font" crossorigin>

除了使用 html 标签来使用 preload,还可以使用如下方式:

代码语言:javascript
复制
<script>
var res = document.createElement("link");
res.rel = "preload";
res.as = "style";
res.href = "styles/other.css";
document.head.appendChild(res);
</script>
代码语言:javascript
复制
Link: <https://example.com/other/styles.css>; rel=preload; as=style

preload 的浏览器支持情况如下:

注意:

1.浏览器使用 preload 加载资源的时候并没有执行里面的代码。比如 :

代码语言:javascript
复制
//myscript.js
alert(1)
<link rel="preload" href="myscript.js" as="script">

当使用浏览器加载时,并不会有弹窗。

2. 若此时发生页面导航,preload 进行中的资源会被取消。

浏览器中如下:

prefetch:

prefetch 是提示浏览器,用户在下次导航时可能会使用的资源,因此浏览器为了提升性能可以提前加载、缓存资源。prefetch 的加载优先级相对较低浏览器在空闲的时候才会在后台加载。

使用方式如下:

代码语言:javascript
复制
<link rel="prefetch" href="/myscript.js" as="script">
代码语言:javascript
复制
<script>
var res = document.createElement("link");
res.rel = "prefetch";
res.as = "style";
res.href = "styles/other.css";
document.head.appendChild(res);
</script>
代码语言:javascript
复制
Link: <https://example.com/other/styles.css>; rel=prefetch; as=style

相对于 preload 而 prefetch 应用在一个不同的场景:跨导航、跨页面使用资源,例如页面 A 初始化了一个页面 B 中关键资源的 prefetch 请求,则关键资源的加载和页面导航可以并行执行,但若是 preload 它会在页面 A 的unload 事件中立即取消。

prefetch 的浏览器支持情况:

注意:

1. prefetch 优先级较低,所以加载的资源有可能会被取消,例如:在网络很差的时候,prefetch 一个大字体文件的时候就有可能被取消。

浏览器中如下:

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-03-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端黑板报 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档