html预加载之link标签
2024-09-05 05:18:45
我们之前提及过link rel 里面有preload和prefetch、modulepreload,都是用于预加载资源
<link rel="preload" href="..." as="...">
<link rel="modulepreload" href="...">
<link rel="prefetch" href="...">
注意preload需要写上正确的as属性,才能正常工作喔(prefetch不需要)。
1. 但是preload和prefetch有什么区别呢?
我们翻看w3c的preload规范,里面有提及:
大致意思就是:
preload是用于预加载当前页的资源,浏览器会优先加载它们
prefetch是用于预加载后续导航使用的资源,浏览器也会加载它们,但优先级不高
补充:
值得注意的是preload的as如果是video,现在浏览器还是没有支持,可以改用as=“fetch”替代 或者 video本身的preload="auto"属性代替
<!-- video的preload -->
<video src="..." controls="controls" preload="auto"></video> <!-- link的preload,as不要写video,因为浏览器还没有支持 -->
<link rel="preload" as="fetch" href="...">
<video src="..." controls="controls"></video>
2. modulepreload和preload
既然有了preload,为什么还有新增一个modulepreload呢?
我们看到developers.google.com有一篇文章专门介绍modulepreload,里面有一段专门的解释:
大概意思是说,使用link preload来预加载JavaScript Module会有2个问题:
1. 预加载如果是跨域并需要开启credentials模式(跨域带cookies),会遇到一些麻烦(具体什么麻烦,没太看懂
最新文章
- javascript推荐书籍
- Intellij IDEA 初级学习文章
- JSP Servlet性能分析
- SQL where 1=1的作用
- Datalist增删改查——联系人管理
- Android数据库升级、降级、创建(onCreate() onUpgrade() onDowngrade())[4]
- NUnit+mock+moq单元测试
- 深入理解PreparedStatement和Statement
- 3个微信小程序体验报告
- vue技术分享-你可能不知道的7个秘密
- Codeforces Educational Round 37
- 分布式环境中,模块数据交互协议分析 (百度brpc)
- Java中equals方法简略描述
- linux系统安全更新
- Java_6 方法
- QQ名片自动点赞
- JSP开发中对jstl的引用方式(标签库引用)
- 沉淀,再出发:Django的简单使用
- 关于分布式Session 的几种实现方式
- 2015年2月编程语言排行榜:JavaScript排名达到历史最高