使用HTML5的链接预取功能(link prefetching)给网站提速


Posted in HTML / CSS onDecember 13, 2012

HTML5的链接预取功能(link prefetching)是一个埋在沙里的宝石,至今还很少人知道它的价值。 你可能已经知道了那古老而又闻名的图片预加载功能,链接预取功能就是将此概念由图片扩展到了网页内容(不需要任何AJAX代码)。
它是这样工作的:在页面上添加一个像这样的链接:

复制代码
代码如下:

<link rel="next" href="page2.html">

这样,当你的机器空闲时,浏览器就会自动的在后台把page2.html下载下来。 当用户最终点击了page2.html的链接时,浏览器会从缓存里把这个页面取出来,所以这个页面的加载速度会出乎意料的快。
目前只有火狐浏览器支持这个功能。但是因为火狐目前是世界上拥有第二大用户群的浏览器,所以只要你在HTML页面了加上这样的一句代码,仍有相 当大的一部分访问者能体验到这十分明显的页面加载速度的提高。很酷吧!

你可以在许多情况下可以使用链接预取功能
* 当你有一篇篇幅很长的文章,或在线教程,或图册等,需要分成多页显示时。
* 在你的网站首页预加载那些用户最可能访问的下一页。(可能是一个商品网站上“重点推荐”商品页面,或博客网站上最近的一篇博客)
* 搜索查询页面预加载搜索出来的前几条。
对于静态的内容你还可以使用rel标记实现预取功能:

复制代码
代码如下:

<link rel="prefetch" href="/images/big.jpeg?ca541d">

这里还有其它一些有趣的事需要注意:
* 链接预取功能不久将会在Opera, Chrome 和 Safari 浏览器里实现,但对于Internet Explorer,你估计要等到2020年。
* 如果这种功能被广泛的使用,它会影响你的网站日志和访问统计。请考虑这样的情况,你的一个页面预存取了好几个页面,可用户实际上没有访问到这几个页面。 你的服务器(或统计工具)并不知道这两者之间的区别。
为了分清这个,Firefox会在HTTP头信息里发送X-moz: prefetch信息,但你需要在服务器端有什么东西能识别这种信息。
HTML / CSS 相关文章推荐
CSS3属性选择符介绍
Oct 17 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 #HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 #HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 #HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 #HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 #HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 #HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 #HTML / CSS
You might like
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
python定时任务 sched模块用法实例
2019/11/04 Python
python绘制彩虹图
2019/12/16 Python
python可视化text()函数使用详解
2020/02/11 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
董事长秘书岗位职责
2013/11/29 职场文书
教师求职信范文分享
2013/12/27 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
幼儿园辞职书
2015/02/26 职场文书
计划生育目标责任书
2015/05/09 职场文书
家庭贫困证明
2015/06/16 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
高三毕业感言
2015/07/30 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis