使用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中Animation属性的使用详解
Aug 06 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 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
PHP Undefined index报错的修复方法
2011/07/17 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
详解Python的三种拷贝方式
2020/02/11 Python
Python内置函数property()如何使用
2020/09/01 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
厂长助理岗位职责
2013/12/27 职场文书
志愿者活动总结
2014/04/28 职场文书
摄影展策划方案
2014/06/02 职场文书
人民调解员培训方案
2014/06/05 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
开国大典观后感
2015/06/04 职场文书