html prefetch的原理,HTML5中rel属性的prefetch预加载功能使用
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是:
利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了.
举个例子说明:比如要预先加载某个页面,可以这样:
XML/HTML Code复制内容到剪贴板
但如果是google的话,要用另外的一个名称,即:
XML/HTML Code复制内容到剪贴板
即使在不支持的浏览器,用了这个特性其实是不会出错的,只不过浏览器解析不到而已,
所以,如果你感觉能有办法预先预测到用户期望点的页面(比如用户看最新的受欢迎的热图,他 可能看了第一页后,会继续看下一页,这个时候就可以用预先加载这个特性了).比如
XML/HTML Code复制内容到剪贴板
">
而单独取一张图片也是可以的,比如:
XML/HTML Code复制内容到剪贴板
有了浏览器缓存,为何还需要预加载?1.用户可能是第一次访问网站,此时还无缓存
2.用户可能清空了缓存
3.缓存可能已经过期,资源将重新加载
4.用户访问的缓存文件可能不是最新的,需要重新加载
5.Chrome 的预加载技术
现在的 chrome 聪明到根据你的浏览记录,预测到你可能访问或搜索哪些网站,在你打开网站之前就加载好了一些资源了。
举个栗子,当你在搜索框输入 "amaz" 时,它猜测到你可能要访问 amazon.com,可能就帮你加载了这个网站的一些资源。
如果这个预测算法精准的话,就能大大地提高用户的浏览体验了。
DNS prefetch我们知道,当我们访问一个网站如 www.amazon.com 时,需要将这个域名先转化为对应的 IP 地址,这是一个非常耗时的过程。
DNS prefetch 分析这个页面需要的资源所在的域名,浏览器空闲时提前将这些域名转化为 IP 地址,真正请求资源时就避免了上述这个过程的时间。
XML/HTML Code复制内容到剪贴板
应用场景1:我们的资源存在在不同的 CDN 中,那提前声明好这些资源的域名,就可以节省请求发生时产生的域名解析的时间。
应用场景2:如果我们知道用户接下来的操作一定会发起一起资源的请求,那就可以将这个资源进行 DNS-Prefetch,加强用户体验。
Resource prefetch在 Chrome 下,我们可以用 link标签声明特定文件的预加载:
XML/HTML Code复制内容到剪贴板
在 Firefox 中或用 meta 标签声明:
XML/HTML Code复制内容到剪贴板
; rel=prefetch">
rel='subresource' 表示当前页面必须加载的资源,应该放到页面最顶端先加载,有最高的优先级。
rel='prefetch' 表示当 subresource 所有资源都加载完后,开始预加载这里指定的资源,有最低的优先级。
注意:只有可缓存的资源才进行预加载,否则浪费资源!
Pre render前面说到的预解析DNS、预加载资源已经够强悍了有木有,可还有更厉害的预渲染(Pre-rendering)!
预渲染意味着我们提前加载好用户即将访问的下一个页面,否则进行预渲染这个页面将浪费资源,慎用!
XML/HTML Code复制内容到剪贴板
rel='prerender' 表示浏览器会帮我们渲染但隐藏指定的页面,一旦我们访问这个页面,则秒开了!
在 Firefox 中或用 rel='next' 来声明
XML/HTML Code复制内容到剪贴板
不是所有的资源都可以预加载当资源为以下列表中的资源时,将阻止预渲染操作:
1.URL 中包含下载资源
2.页面中包含音频、视频
3.POST、PUT 和 DELETE 操作的 ajax 请求
4.HTTP 认证(Authentication)
5.HTTPS 页面
6.含恶意软件的页面
7.弹窗页面
8.占用资源很多的页面
9.打开了 chrome developer tools 开发工具
手动触发预渲染操作在 head 中强势插入 link[rel='prerender'] 即可:
JavaScript Code复制内容到剪贴板
var hint =document.createElement("link")
hint.setAttribute(“rel”,”prerender”)
hint.setAttribute(“href”,”next-page.html”)
document.getElementsByTagName(“head”)[0].appendChild(hint)
html prefetch的原理,HTML5中rel属性的prefetch预加载功能使用相关推荐
- 详解HTML5中rel属性的prefetch预加载功能使用
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效 ...
- 通过rel=preload进行内容预加载
proload基础 <link> 元素的 rel 属性的属性值preload能够让你在你的HTML页面中 <head>元素内部书写一些声明式的资源获取请求,可以指明哪些资源是在 ...
- 好看的html登录遮罩提示加载中,jQuery炫酷页面预加载Loading特效插件
fakeLoader.js是一款轻量级的 jQuery 炫酷页面预加载Loading特效插件.它能帮助我们创建一个全屏遮罩效果的旋转loading效果来模拟页面预加载过程. Bower安装 bower ...
- vue项目中使用大图片提前预加载处理方案
目的: 图片预加载能够使得用户在浏览后续页面的时候,不会出现图片加载一半导致浏览不流畅的情况. 方案一 项目打开的时候要对图片进行预加载,在App.vue里面的beforeCreate添加预加载程序 ...
- android调用h5预加载图片,使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度...
不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...
- prefetch 和preload_PrefetchPreload预加载方案总结
为了提高网页首次加载响应速度,对移动端预加载方案进行调研整理. 方案大体分为三类: 浏览器机制 - prefetch & preload: webpack魔法注释 - 通过魔法注释可以直接通过 ...
- [html] 说说你对HTML5中pattern属性的理解
[html] 说说你对HTML5中pattern属性的理解 好像是判断input在输入时按下tab键跳转到下一个input的优先级 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...
- html prefetch的原理,HTML5 prefetch
声明:此文带着自己的理解,不完全按原文翻译 prefetch 即预加载,在用户需要前我们就将所需的资源加载完毕. 有了浏览器缓存,为何还需要预加载? 用户可能是第一次访问网站,此时还无缓存 用户可能清 ...
- html5不支持的属性,IE9对HTML5中部分属性不支持的原因分析
这篇文章主要为大家介绍了IE9对HTML5中部分属性不支持的原因分析,对于了解IE9与HTML5的应用有一定帮助作用,需要的朋友可以参考下 本文较为详细的分析了IE9对HTML5中部分属性不支持的原因 ...
最新文章
- 自动随机逐层剪枝openpose
- 新装iis 页面503错误 DefaultAppPool停止解决方案
- oracle rac重建grid,oracle 11g rac安装之grid报错解决
- boost::callable_traits的remove_member_reference_t的测试程序
- 《淡夜未央》:互动叙事游戏如何提升玩家参与感和互动性?
- 江苏自学考试计算机网络专业,速看,江苏自考本科计算机网络专业介绍
- COM 组件设计与应用(十一)
- arp_announce和arp_ignore 明白解说
- http和https的区别与联系
- Postgres外部表示例
- es6 class语法糖
- ubuntu桌面模式下,鼠标右键没有新建文档,的解决方法
- WPS论文编写问题集(参考文献制作、公式居中及编号、公式影响行间距...)_长期更新中ing...
- nginx 基本入门
- MySQL 查询各年龄段
- 上市只是开端,库客音乐用版权打出组合拳
- 计算机怎么更换硬盘,怎么给台式电脑替换新硬盘?
- html 图片拼接,css sprite图像拼接技术
- ReferenceQueue、Reference详解
- 搜索引擎使用技巧-更好地使用搜索