使用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实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
CSS基础详解
Oct 16 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 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
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
PHP实现事件机制的方法
2015/07/10 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
限制文本框输入N个字符的js代码
2010/05/13 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
微信JS接口大全
2016/08/25 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
python实现哈希表
2014/02/07 Python
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
详解Python用户登录接口的方法
2019/04/17 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
python实现微信打飞机游戏
2020/03/24 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
python Gabor滤波器讲解
2020/10/26 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
最新的互联网创业计划书
2014/01/10 职场文书
羊脂球读书笔记
2015/06/30 职场文书
应届毕业生的自我评价
2019/06/21 职场文书