使用preload预加载页面资源时注意事项


Posted in Javascript onFebruary 03, 2020

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

将加载和执行分离开,可不阻塞渲染和 document 的 onload 事件

提前加载指定资源,不再出现依赖的 font 字体隔了一段时间才刷出

如何使用 preload

使用 link 标签创建

<!-- 使用 link 标签静态标记需要预加载的资源 -->
<link rel="preload" href="/path/to/style.css" rel="external nofollow" 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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<link rel="preload" as="script" href="https://a.xxx.com/xxx/PcCommon.js" rel="external nofollow" >
<link rel="preload" as="script" href="https://a.xxx.com/xxx/TabsPc.js" rel="external nofollow" >

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

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

使用preload预加载页面资源时注意事项

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

const isPreloadSupported = () => {
const link = document.createElement('link');
const relList = link.relList;
if (!relList || !relList.supports) {
return false;
}
return relList.supports('preload');
};

如何区分 preload 和 prefetch

preload 是告诉浏览器页面必定需要的资源,浏览器一定会加载这些资源;

prefetch 是告诉浏览器页面可能需要的资源,浏览器不一定会加载这些资源。

preload 是确认会加载指定资源,如在我们的场景中,x-report.js 初始化后一定会加载 PcCommon.js 和 TabsPc.js, 则可以预先 preload 这些资源;

prefetch 是预测会加载指定资源,如在我们的场景中,我们在页面加载后会初始化首屏组件,当用户滚动页面时,会拉取第二屏的组件,若能预测用户行为,则可以 prefetch 下一屏的组件。

preload 将提升资源加载的优先级

使用 preload 前,在遇到资源依赖时进行加载:

使用preload预加载页面资源时注意事项

使用 preload 后,不管资源是否使用都将提前加载:

使用preload预加载页面资源时注意事项

可以看到,preload 的资源加载顺序将被提前:

使用preload预加载页面资源时注意事项

避免滥用 preload

使用 preload 后,Chrome 会有一个警告:

使用preload预加载页面资源时注意事项

如上文所言,若不确定资源是必定会加载的,则不要错误使用 preload,以免本末倒置,给页面带来更沉重的负担。

当然,可以在 PC 中使用 preload 来刷新资源的缓存,但在移动端则需要特别慎重,因为可能会浪费用户的带宽。

避免混用 preload 和 prefetch

preload 和 prefetch 混用的话,并不会复用资源,而是会重复加载。

<link rel="preload" href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" as="font">
<link rel="prefetch" href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" as="font">

使用 preload 和 prefetch 的逻辑可能不是写到一起,但一旦发生对用一资源 preload 或 prefetch 的话,会带来双倍的网络请求,这点通过 Chrome 控制台的网络面板就能甄别:

使用preload预加载页面资源时注意事项

避免错用 preload 加载跨域资源

若 css 中有应用于已渲染到 DOM 树的元素的选择器,且设置了 @font-face 规则时,会触发字体文件的加载。 而字体文件加载中时,DOM 中的这些元素,是处于不可见的状态。对已知必加载的 font 文件进行预加载,除了有性能提升外,更有体验优化的效果。

在我们的场景中,已知 antd.css 会依赖 font 文件,所以我们可以对这个字体文件进行 preload:

<link rel="preload" as="font" href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >

然而我发现这个文件加载了两次:

使用preload预加载页面资源时注意事项

使用preload预加载页面资源时注意事项

使用preload预加载页面资源时注意事项

原因是对跨域的文件进行 preload 的时候,我们必须加上 crossorigin 属性:

<link rel="preload" as="font" crossorigin href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >

再看一下网络请求,就变成一条了。

W3 规范是这么解释的:

Preload links for CORS enabled resources, such as fonts or images with a crossorigin attribute, must also include a crossorigin attribute, in order for the resource to be properly used.

那为何会有两条请求,且优先级不一致,又没有命中缓存呢?这就得引出下一个话题来解释了。

不同资源加载的优先级规则

我们先来看一张图:

使用preload预加载页面资源时注意事项

这张表详见:Chrome Resource Priorities and Scheduling

这张图表示的是,在 Chrome 46 以后的版本中,不同的资源在浏览器渲染的不同阶段进行加载的优先级。 在这里,我们只需要关注 DevTools Priority 体现的优先级,一共分成五个级别:

Highest 最高

Hight 高

Medium 中等

Low 低

Lowest 最低

使用preload预加载页面资源时注意事项

html 主要资源,其优先级是最高的

使用preload预加载页面资源时注意事项

使用preload预加载页面资源时注意事项

css 样式资源,其优先级也是最高的

使用preload预加载页面资源时注意事项

CSS(match) 指的是对已有的 DOM 具备规则的有效的样式文件。

使用preload预加载页面资源时注意事项

script 脚本资源,优先级不一

使用preload预加载页面资源时注意事项

使用preload预加载页面资源时注意事项

前三个 js 文件是写死在 html 中的静态资源依赖,后三个 js 文件是根据首屏按需异步加载的组件资源依赖,这正验证了这个规则。

font 字体资源,优先级不一

使用preload预加载页面资源时注意事项

使用preload预加载页面资源时注意事项

样式文件中有一个 @font-face 依赖一个 font 文件,样式文件中依赖的字体文件加载的优先级是 Highest; 在使用 preload 预加载这个 font 文件时,若不指定 crossorigin 属性(即使同源),则会采用匿名模式的 CORS 去加载,优先级是 High,看下图对比: 第一条 High 优先级也就是 preload 的请求:

使用preload预加载页面资源时注意事项

第二条 Highest 也就是样式引入的请求:

使用preload预加载页面资源时注意事项

可以看到,在 preload 的请求中,缺少了一个 origin 的请求头字段,表示这个请求是匿名的请求。 让这两个请求能共用缓存的话,目前的解法是给 preload 加上 crossorigin 属性,这样请求头会带上 origin, 且与样式引入的请求同源,从而做到命中缓存:

<link rel="preload" as="font" crossorigin href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >

这么请求就只剩一个:

使用preload预加载页面资源时注意事项

使用preload预加载页面资源时注意事项

在网络瀑布流图中,也显示成功预加载且后续命中缓存不再二次加载:

使用preload预加载页面资源时注意事项

总结

preload 是个好东西,能告诉浏览器提前加载当前页面必须的资源,将加载与解析执行分离开,做得好可以对首次渲染带来不小的提升,但要避免滥用,区分其与 prefetch 的关系,且需要知道 preload 不同资源时的网络优先级差异。

preload 加载页面必需的资源如 CDN 上的字体文件,与 prefetch 预测加载下一屏数据,兴许是个不错的组合。

更多关于preload预加载页面的文章大家可以看看下面的相关链接

Javascript 相关文章推荐
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
javascript数据类型详解
Feb 07 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 #jQuery
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 #Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 #Javascript
微信小程序实现同时上传多张图片
Feb 03 #Javascript
解决小程序无法触发SESSION问题
Feb 03 #Javascript
vue组件创建的三种方式小结
Feb 03 #Javascript
Vuex模块化应用实践示例
Feb 03 #Javascript
You might like
一个程序下载的管理程序(三)
2006/10/09 PHP
初品cakephp 入门基础
2012/02/16 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
PHP中使用BigMap实例
2015/03/30 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
PHP attributes()函数讲解
2019/02/03 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
python 使用shutil复制图片的例子
2019/12/13 Python
python爬虫请求头设置代码
2020/07/28 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
学习十八大精神心得体会
2013/12/31 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
经典英文广告词
2014/03/18 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
公司晚会策划方案
2014/05/17 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
工作简报格式范文
2015/07/21 职场文书
python Polars库的使用简介
2021/04/21 Python
Python中如何处理常见报错
2022/01/18 Python
解析python中的jsonpath 提取器
2022/01/18 Python