使用 Preload/Prefetch 优化
<link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
将 rel 设定为 preload,表示浏览器应该预加载该资源。as 属性表示获取特定的内容类。crossorigin 属性表示该资源是否应该使用一个 CORS 请求来获取。
as
该属性仅在元素设置了 rel="preload" 或者 rel="prefetch" 时才能使用。它规定了元素加载的内容的类型,对于内容的优先级、请求匹配、正确的内容安全策略的选择以及正确的 Accept 请求头的设置,这个属性是必需的。
不同资源浏览器优先级,在 Chrome 46 以后的版本中,不同的资源在浏览器渲染的不同阶段进行加载的优先级如下图所示:
自己网站资源优先级也可以通过 Chrome 控制台 Network 一栏进行查看.
1、对于使用 prefetch 获取资源,其优先级默认为最低,Lowest,可以认为当浏览器空闲的时候才会去获取的资源。
2、而对于 preload 获取资源,可以通过 "as" 或者 "type" 属性来标识他们请求资源的优先级(比如说 preload 使用 as="style" 属性将获得最高的优先级,即使资源不是样式文件)
3、没有 “as” 属性的将被看作异步请求。
什么情况会导致二次获取?
不要将 preload 和 prefetch 进行混用,它们分别适用于不同的场景,对于同一个资源同时使用 preload 和 prefetch 会造成二次的下载。
preload 字体不带 crossorigin 也将会二次获取!确保你对 preload 的字体添加 crossorigin 属性,否则他会被下载两次,这个请求使用匿名的跨域模式。这个建议也适用于字体文件在相同域名下,也适用于其他域名的获取(比如说默认的异步获取)。
preload 是告诉浏览器页面必定需要的资源,浏览器一定会加载这些资源,而 prefetch 是告诉浏览器页面可能需要的资源,浏览器不一定会加载这些资源。所以建议:对于当前页面很有必要的资源使用 preload,对于可能在将来的页面中使用的资源使用 prefetch。
使用案例
提前加载字体文件。由于字体文件必须等到 CSSOM 构建完成并且作用到页面元素了才会开始加载,会导致页面字体样式闪动。所以要用 preload 显式告诉浏览器提前加载。假如字体文件在 CSS 生效之前下载完成,则可以完全消灭页面闪动效果。
使用 preload 预加载第二屏的内容,在网页开发中,对于非首屏部分采用懒加载是我们页面常用的优化手段,所以我们在页面 onload 之后可以通过 preload 来加载次屏所需要的资源,在用户浏览完首屏内容滚动时能够更快地看到次屏的内容。
在页面加载完成之后,可以分析页面上所有的链接,判断用户可能会点击的页面,分析提取下一跳页面上所有的资源使用 prefetch 进行加载(这里不使用 preload,因为不一定会点击),浏览器会在空闲地时候进行加载,当用户点击链接命中了缓存,这可以有效地提升下一页面的首屏渲染时间。
对于商品列表页面,在用户鼠标停留在某个商品的时候,可以去分析商品详情页所需要的资源并提前开启 preload 加载,跟第 3 点类似,都是用来预测用户的行为并且做出一些预加载的手段,区别在于当用户停留在商品上时,点击命中率更高,preload 可以立即加载资源,有效提升缓存命中率。
使用 Preload/Prefetch 优化相关推荐
- prefetch 和preload_使用 Preload/Prefetch 优化你的应用
衡量网站的性能的指标有很多,其中有项重要的指标就是网站的首屏时间,为此前端工程师们都是绞尽脑汁想尽办法进行优化自己的应用,诸如像服务端渲染,懒加载,CDN 加速,ServiceWorker 等等方法, ...
- prefetch 和preload_前端preload, prefetch,dns-prefetch,defer,async了解一下
preload 通过rel="preload"进行内容预加载 元素的 rel 属性的属性值preload能够让你在你的HTML页面中 元素内部书写一些声明式的资源获取请求,可以指明 ...
- 和 loading 界面说 ByeBye
全栈框架 Remix 宣布开源,于是怀着好奇心去看了下官网,发现了这个口号(Say goodbye to Spinnageddon): 活整的还挺好的,再往下看看实现的效果是怎么样的. 大厂技术 高 ...
- 首次登录界面使用大图片做背景,加载缓慢
解决首次登录,加载缓慢的过程. 大的图片是不经过webpack打包,把图片放到使用CDN的服务器中,争取多节点都部署登录界面的图片,提高图片的请求速度. 可以把高清图像切割成四小块,提高获取的速度 可 ...
- 做前端性能优化,还不知道什么是Preload、Prefetch、Preconnect、Prerendering,你就out了?
做前端性能优化,还不知道什么是Preload.Prefetch.Preconnect? 今天,我们将探讨当前的资源提示和指令,这是提高网站或 Web 应用程序性能的另一种好方法.您可能听说过Prelo ...
- prefetch 和preload_webpack优化之preload和prefetch
prefetch 这段代码告诉浏览器,这段资源将会在未来某个导航或者功能要用到,但是本资源的下载顺序权重比较低.也就是说prefetch通常用于加速下一次导航,而不是本次的. 被标记为prefetch ...
- 学会preload和prefetch
preload和prefetch是什么? 我们常说的preload和prefetch,是link标签rel里新增的两种值,用于让浏览器提前加载指定的资源,它们会先被缓存(属于http cache缓存) ...
- Webpack5优化之提高代码运行性能(Preload、Network Cache、Core-js、PWA)
文章目录 一.Preload/Prefetch 1.1 为什么 1.2 是什么 1.2.1 共同点: 1.2.2 区别: 1.2.3 问题 1.2.4 总结 1.3 怎么样 1.3.1 安装依赖 1. ...
- 错过校招_您可能错过的Web优化技巧
错过校招 by Harnoor Bandesh 由Harnoor Bandesh 您可能错过的Web优化技巧 (The Web Optimization trick you might have mi ...
最新文章
- R语言包_reshape2
- 四张图带你了解Tomcat系统架构--让面试官颤抖的Tomcat回答系列!【转】
- VTK:Utilities之DataAnimationSubclass
- ​rsync生产排错FAQ整理16
- 薛老师软考高项学员:2016年4月6日作业
- 信息学奥赛一本通(1069:乘方计算)
- linux向用户发送消息
- 会话信息必须在服务器端,有关会话跟踪技术描述正确的是
- 常用css样式属性大全(中文注释)
- ajax 动态加载的内容,相应的js也要在回调里加载
- Sql server锁,独占锁,共享锁,更新锁,乐观锁,悲观锁
- 微信开发第7章 通过accesstoken获取用户黑名单列表
- oracle多表嵌套查询使用,oracle sql 多表 嵌套子查询 连接查询, join where exist i...
- MEF(Managed Extensibility Framework)学习笔记
- [js开源组件开发]js文本框计数组件
- Response常用方法
- 易语言.用修改注册表的方式来关闭win10自带的杀毒软件
- 3500元预算配置一台办公用台式计算机,配台式电脑机,预算3500左右,请问如何配置,各配件功能作用及大? 爱问知识人...
- 全国计算机二级考c考点,2019年全国计算机二级C语言考试考点解析(1)
- 旅游攻略app开发定制