相关文章推荐
刀枪不入的生姜  ·  Microsoft Ajax CDN 上的 ...·  1 月前    · 
刚毅的灭火器  ·  GIT permission denied ...·  4 周前    · 
慈祥的针织衫  ·  C#/.NET/.NET ...·  2 周前    · 
威武的烤面包  ·  在 Ubuntu 上安装 ...·  2 天前    · 
独立的灭火器  ·  多智能体强化学习smac环境配置(Linux ...·  昨天    · 
爽快的夕阳  ·  看懂古玉孔道痕迹,才能搞懂古玉鉴定方法(干货 ...·  1 月前    · 
胆小的山羊  ·  关于举办第十五期入党积极分子培训班的通知 ...·  5 月前    · 
温柔的汽水  ·  斗罗:收徒霍雨浩,武魂无限觉醒(风流倜傥小家 ...·  7 月前    · 
魁梧的啄木鸟  ·  携程酒店-速8酒店(北京大兴机场线草桥地铁店 ...·  7 月前    · 
帅呆的弓箭  ·  关于中国驻美国大使馆启用“中国领事”APP ...·  8 月前    · 
Code  ›  用 preload 预加载页面资源开发者社区
https
https://cloud.tencent.com/developer/article/1511149
逆袭的红酒
1 年前
作者头像
ConardLi
0 篇文章

用 preload 预加载页面资源

前往专栏
腾讯云
开发者社区
文档 意见反馈 控制台
首页
学习
活动
专区
工具
TVP
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP
返回腾讯云官网
社区首页 > 专栏 > code秘密花园 > 用 preload 预加载页面资源

用 preload 预加载页面资源

作者头像
ConardLi
发布 于 2019-09-23 18:55:34
1.3K 0
发布 于 2019-09-23 18:55:34
举报

用 preload 预加载页面资源

作者简介 felix 蚂蚁金服·数据体验技术团队 https://github.com/ProtoTeam/blog/blob/master/201802/1.md

本文主要介绍preload的使用,以及与prefetch的区别。然后会聊聊浏览器的加载优先级。

preload 提供了一种声明式的命令,让浏览器提前加载指定资源(加载后并不执行),在需要执行的时候再执行。提供的好处主要是

  • 将加载和执行分离开,可不阻塞渲染和 document 的 onload 事件
  • 提前加载指定资源,不再出现依赖的font字体隔了一段时间才刷出

如何使用 preload

使用 link 标签创建

<!-- 使用 link 标签静态标记需要预加载的资源 -->
<link rel="preload" href="/path/to/style.css" as="style">
<!-- 或使用脚本动态创建一个 link 标签后插入到 head 头部 -->
<script>
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'style';
link.href = '/path/to/style.css';
document.head.appendChild(link);
</script>

使用 HTTP 响应头的 Link 字段创建

Link: <https://example.com/other/styles.css>; rel=preload; as=style

如我们常用到的 antd 会依赖一个 CDN 上的 font.js 字体文件,我们可以设置为提前加载,以及有一些模块虽然是按需异步加载,但在某些场景下知道其必定会加载的,则可以设置 preload 进行预加载,如:

<link rel="preload" as="font"   href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff">
<link rel="preload" as="script" href="https://a.xxx.com/xxx/PcCommon.js">
<link rel="preload" as="script" href="https://a.xxx.com/xxx/TabsPc.js">

如何判断浏览器是否支持 preload

目前我们支持的浏览器主要为高版本 Chrome,所以可放心使用 preload 技术。其他环境在 caniuse.com 上查到的支持情况如下:

在不支持 preload 的浏览器环境中,会忽略对应的 link 标签,而若需要做特征检测的话,则:

const isPreloadSupported = () => {
  const link = document.createElement('link');
  const relList = link.relList;
  if (!relList || !relList.supports) {
    return false;
 
推荐文章
刀枪不入的生姜  ·  Microsoft Ajax CDN 上的 jQuery UI 1.10.0 | Microsoft Learn
1 月前
刚毅的灭火器  ·  GIT permission denied publickey-阿里云
4 周前
慈祥的针织衫  ·  C#/.NET/.NET Core优秀项目和框架2023年12月简报-阿里云开发者社区
2 周前
威武的烤面包  ·  在 Ubuntu 上安装 PowerShell - PowerShell | Microsoft Learn
2 天前
独立的灭火器  ·  多智能体强化学习smac环境配置(Linux)_安装多智能强化学习环境pymarl报错
昨天
爽快的夕阳  ·  看懂古玉孔道痕迹,才能搞懂古玉鉴定方法(干货)_钻孔
1 月前
胆小的山羊  ·  关于举办第十五期入党积极分子培训班的通知 - 学院党校 - 华南师范大学计算机学院
5 月前
温柔的汽水  ·  斗罗:收徒霍雨浩,武魂无限觉醒(风流倜傥小家丁)全本在线阅读-首发起点中文网官方正版
7 月前
魁梧的啄木鸟  ·  携程酒店-速8酒店(北京大兴机场线草桥地铁店)预订-速8酒店(北京大兴机场线草桥地铁店)价格、点评、电话、地址查询-【携程旅行手机版】
7 月前
帅呆的弓箭  ·  关于中国驻美国大使馆启用“中国领事”APP “消息推送”功能的通知_中华人民共和国驻美利坚合众国大使馆
8 月前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号