prefetch 和preload_prefetch和preload
前面的话
基于VUE的前端小站改造成SSR服务器端渲染后,HTML文档会自动使用preload和prefetch来预加载所需资源,本文将详细介绍preload和prefetch的使用
资源优先级
在介绍preload和prefetch之前,首先要介绍浏览器的资源优先级
在Chrome浏览器中,不同的资源在浏览器渲染的不同阶段进行加载的优先级不同
一共分成五个级别
Highest 最高
Hight 高
Medium 中等
Low 低
Lowest 最低
其中主资源HTML和CSS的优先级最高,其他资源根据情况的不同优先级不一
JS脚本根据它们在文件中的位置是否异步、延迟或阻塞获得不同的优先级:
1、网络在第一个图片资源之前阻塞的脚本在网络优先级中是中级
2、网络在第一个图片资源之后阻塞的脚本在网络优先级中是低级
3、异步/延迟/插入的脚本(无论在什么位置)在网络优先级中是很低级
图片(视口可见)将会获得相对于视口不可见图片(低级)的更高的优先级(中级),所以某些程度上 Chrome 将会尽量懒加载这些图片。低优先级的图片在布局完成被视口发现时,将会获得优先级提升
preload 使用 “as” 属性加载的资源将会获得与资源 “type” 属性所拥有的相同的优先级。比如说,preload as="style" 将会获得比 as=“script” 更高的优先级
不带 “as” 属性的 preload 的优先级将会等同于异步请求
preload
【定义】
如下所示,preload是link元素中的rel属性值
preload 提供了一种声明式的命令,让浏览器提前加载指定资源(加载后并不执行),需要执行时再执行
这样做的好处在于:
1、将加载和执行分离开,不阻塞渲染和document的onload事件
2、提前加载指定资源,不再出现依赖的font字体隔了一段时间才刷出的情况
【创建】
使用 link 标签静态标记需要预加载的资源
也可以使用脚本动态创建一个 link 标签后插入到 head 头部
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'style';
link.href = '/path/to/style.css';
document.head.appendChild(link);
【检测】
在不支持 preload 的浏览器环境中,会忽略对应的 link 标签,而若需要做特征检测的话,则可以使用如下代码
const isPreloadSupported = () => {
const link = document.createElement('link');
const relList = link.relList;
if (!relList || !relList.supports) {
return false;
}
return relList.supports('preload');
}
【特性】
使用 preload 后,不管资源是否使用都将提前加载。若不确定资源是必定会加载的,则不要错误使用 preload,以免本末导致,给页面带来更沉重的负担
Preload 有 as 属性,浏览器可以设置正确的资源加载优先级,这种方式可以确保资源根据其重要性依次加载, 所以,Preload既不会影响重要资源的加载,又不会让次要资源影响自身的加载;浏览器能根据 as 的值发送适当的 Accept 头部信息;浏览器通过 as 值能得知资源类型,因此当获取的资源相同时,浏览器能够判断前面获取的资源是否能重用
如果忽略 as 属性,或者错误的 as 属性会使 preload 等同于 XHR 请求,浏览器不知道加载的是什么,因此会赋予此类资源非常低的加载优先级
Preload 的与众不同还体现在 onload 事件上。也就是说可以定义资源加载完毕后的回调函数
比如,可以使用preload的样式表立即生效
此外,preload 不会阻塞 windows 的 onload 事件
对跨域的文件进行preload时,必须加上 crossorigin 属性
【二次获取】
1、不使用as属性
如果对所 preload 的资源不使用明确的 “as” 属性,将会导致二次获取
2、字体文件
preload 字体不带 crossorigin 会二次获取! 确保对 preload 的字体添加 crossorigin 属性,否则字体文件会被下载两次,这个请求使用匿名的跨域模式。这个建议也适用于字体文件在相同域名下,也适用于其他域名的获取(比如说默认的异步获取)
【警告】
没有用到的 preload 资源在 Chrome 的 console 里会在 onload 事件 3s 后发生警告
prefetch
如下所示,prefetch是link元素中的rel属性值
它的作用是告诉浏览器加载下一页面可能会用到的资源,注意,是下一页面,而不是当前页面。因此该方法的加载优先级非常低,也就是说该方式的作用是加速下一个页面的加载速度
【区分】
preload 是告诉浏览器页面必定需要的资源,浏览器一定会加载这些资源
prefetch 是告诉浏览器页面可能需要的资源,浏览器不一定会加载这些资源
在VUE SSR生成的页面中,首页的资源均使用preload,而路由对应的资源,则使用prefetch
所以,对于当前页面很有必要的资源使用 preload,对于可能在将来的页面中使用的资源使用 prefetch
【不要混用】
preload 和 prefetch 混用的话,并不会复用资源,而是会重复加载
使用 preload 和 prefetch 的逻辑可能不是写到一起,但一旦发生对用一资源 preload 或 prefetch 的话,会带来双倍的网络请求
prefetch 和preload_prefetch和preload相关推荐
- prefetch 和preload_前端preload, prefetch,dns-prefetch,defer,async了解一下
preload 通过rel="preload"进行内容预加载 元素的 rel 属性的属性值preload能够让你在你的HTML页面中 元素内部书写一些声明式的资源获取请求,可以指明 ...
- prefetch 和preload_使用 Preload/Prefetch 优化你的应用
衡量网站的性能的指标有很多,其中有项重要的指标就是网站的首屏时间,为此前端工程师们都是绞尽脑汁想尽办法进行优化自己的应用,诸如像服务端渲染,懒加载,CDN 加速,ServiceWorker 等等方法, ...
- java的prefetch()_Prefetch和预加载实践
之前介绍了利用Preload优化首屏关键资源的加载.今天跟大家介绍另一个性能优化手段--Prefetch.文末会结合常见工具,教大家在项目中使用Preload和Prefetch. 跟Preload类似 ...
- vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
// 每日前端夜话 第412篇// 正文共:1800 字// 预计阅读时间:8 分钟 简介 通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 ...
- vue实现进度条隐藏_实现带有进度条的Vue延迟加载
下面Vue.js栏目给大家介绍一下给Vue的惰性加载添加进度条的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 简介 通常用 Vue.js 编写单页应用(SPA)时,当加载页面 ...
- 适合所有网站的前端优化技巧,值得你收藏!
导读:本文虽然明指了某个主页,但是其实是适合所有网站系统前端的优化技巧的. 最近,我们将 Universe.com 主页的性能提升了十倍以上.在本文中,我们将解析实现这一重大改进的具体技术手段. 但在 ...
- 从渲染原理谈前端性能优化
前言 合格的开发者知道怎么做,而优秀的开发者知道为什么这么做. 这句话来自<web性能权威指南>,我一直很喜欢,而本文尝试从浏览器渲染原理探讨如何进行性能提升. 全文将从网络通信以及页面渲 ...
- webpack打包策略、treeShaking
打包策略 选择合适的打包粒度,生成的单文件大小不要超过500KB 充分利用浏览器的并发请求,同时保证并发数不超过6 尽可能让浏览器命中304,频繁改动的业务代码不要与公共代码打包 避免加载太多用不到的 ...
- 浏览器渲染点滴yan
打印: 在浏览器地址栏输入URL,按下回车后究竟发生了什么? DOMContentLoaded与load的区别.触发时机 浏览器连接限制 defer async 针对script标签 preload, ...
最新文章
- 前来推荐一本比较喜欢的读物——《浪潮之巅》
- iOS UITextView 随键盘弹出界面上移
- 老鼠怕猫是鼻子决定的?!
- 高级SQL优化(三) 常用优化工具 ——《12年资深DBA教你Oracle开发与优化——性能优化部分》...
- 如何在word写小论文在正文分栏后第一页左下角添加 项目 基金 作者简介 (添加通栏脚注)
- Failed to load resource: the server responded with a status of 500 (Internal Server Error)
- 【渝粤题库】国家开放大学2021春2517社区工作题目
- Android官方开发文档Training系列课程中文版:分享文件之配置文件共享
- 挖掘建模-分类与预测-决策树
- CSS3贝塞尔曲线$$动画效果
- 不懂性能测试,被面试官挂了...
- 夏令营讲课内容整理 Day 6 Part 3.
- C语言 三角函数用法
- 自行设计开源的pdf转word软件(python开发设计)
- python连连看小游戏_连连看小游戏
- 东芝计算机配置,东芝Toshiba笔记本电脑开机进入BIOS的方法与bios设置参数介绍(ESC+F1)...
- oracle 联合查询去重,oracle两张表关联查询
- Android开发之隐示意图跳转
- ios10 上下黑边问题
- SQL两张表筛选相同数据和不同数据