相关文章推荐
性感的香槟  ·  摆脱流氓flash广告-知识分享平台·  2 周前    · 
慈祥的针织衫  ·  C#/.NET/.NET ...·  2 周前    · 
玩足球的拐杖  ·  matrix软件·  1 周前    · 
愉快的核桃  ·  GitHub - ...·  1 周前    · 
卖萌的煎鸡蛋  ·  个人开发者E5账号无法登录,导致网盘资料无法 ...·  3 小时前    · 
跑龙套的啄木鸟  ·  使用合并以更新插入的方式插入到 Delta ...·  9 月前    · 
瘦瘦的企鹅  ·  Spring Cloud ...·  1 年前    · 
宽容的黑框眼镜  ·  772. 只出现一次的字符 ---- ...·  1 年前    · 
另类的金针菇  ·  【react】利用shouldCompone ...·  1 年前    · 
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;
 
推荐文章
性感的香槟  ·  摆脱流氓flash广告-知识分享平台
2 周前
慈祥的针织衫  ·  C#/.NET/.NET Core优秀项目和框架2023年12月简报-阿里云开发者社区
2 周前
玩足球的拐杖  ·  matrix软件
1 周前
愉快的核桃  ·  GitHub - microsoft/LightGBM: A fast, distributed, high performance gradient boosting (GBT, GBDT, GBR
1 周前
卖萌的煎鸡蛋  ·  个人开发者E5账号无法登录,导致网盘资料无法使用 - Microsoft Q&A
3 小时前
跑龙套的啄木鸟  ·  使用合并以更新插入的方式插入到 Delta Lake 表中 - Azure Databricks | Microsoft Learn
9 月前
瘦瘦的企鹅  ·  Spring Cloud Admin健康检查 邮件、钉钉群通知-51CTO.COM
1 年前
宽容的黑框眼镜  ·  772. 只出现一次的字符 ---- 给你一个只包含小写字母的字符串。请你判断是否存在只在字符串中出现过一次的字符-腾讯云开发者社区-腾讯云
1 年前
另类的金针菇  ·  【react】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的必要性-腾讯云开发者社区-腾讯云
1 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号