使用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中,为什么要尽可能使用局部变量?
Apr 06 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
js面向对象的写法
Feb 19 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
ES6中Set和Map用法实例详解
Mar 02 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
php INI配置文件的解析实现分析
2011/01/04 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
鼠标图片振动代码
2006/07/06 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
js快速排序的实现代码
2013/12/08 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
python算法学习之基数排序实例
2013/12/18 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
详解Python:面向对象编程
2019/04/10 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
简单租房协议书
2014/04/09 职场文书
群众路线对照检查材料
2014/09/22 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
开学随笔
2015/08/15 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js