首页 > 网页教程 > HTML > 正文

HTML5新特性：用链接预取功能给网站提速

2010-06-09 21:47:11 作者：不详来源：互联网

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

它是这样工作的：在页面上添加一个像这样的链接：

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

这样，当你的机器空闲时，浏览器就会自动的在后台把page2.html下载下来。当用户最终点击了page2.html的链接时，浏览器会从缓存里把这个页面取出来，所以这个页面的加载速度会出乎意料的快。

目前只有火狐浏览器支持这个功能。但是因为火狐目前是世界上拥有第二大用户群的浏览器，所以只要你在HTML页面了加上这样的一句代码，仍有相当大的一部分访问者能体验到这十分明显的页面加载速度的提高。很酷吧！

你可以在许多情况下可以使用链接预取功能：

当你有一篇篇幅很长的文章，或在线教程，或图册等，需要分成多页显示时。
在你的网站首页预加载那些用户最可能访问的下一页。(可能是一个商品网站上“重点推荐”商品页面，或博客网站上最近的一篇博客)
搜索查询页面预加载搜索出来的前几条。

对于静态的内容你还可以使用rel标记实现预取功能：

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

这里还有其它一些有趣的事需要注意：

链接预取功能不久将会在Opera, Chrome 和 Safari 浏览器里实现，但对于Internet Explorer，你估计要等到2020年。
如果这种功能被广泛的使用，它会影响你的网站日志和访问统计。

请考虑这样的情况，你的一个页面预存取了好几个页面，可用户实际上没有访问到这几个页面。你的服务器（或统计工具）并不知道这两者之间的区别。为了分清这个，Firefox会在HTTP头信息里发送X-moz: prefetch信息，但是你需要在服务端做一些逻辑处理来检测这些请求。

相关热词：HTML5 链接预取

分享到：

更多...

收藏至我的帐号

教程排行榜: 神奇的HTML5动画效果演示网站; 十款基于HTML5开发的精彩WEB应用(HTML5网站演示); 25个超炫的HTML5+CSS3网页应用案例欣赏; 十三个网站案例让你提前体验HTML5和CSS3的魅力; 15个采用HTML5实现的网站界面设计欣赏; 体验HTML5 Canvas对象的强大五款在线绘图应用示例; 16个颇具创意的HTML5网站设计; 网页设计师必收藏的十五个HTML5资源; HTML的电子邮件链接标签mailto用法详解; 21款效果惊艳基于HTML5的应用程序欣赏; 采用HTML5搭建的多个网站尝鲜试用; HTML5的一些的趣味小应用; 如何用HTML5制作网页？; HTML标签的语义化概念、意义和实践; HTML中的文本框textarea标签; 让IE和Firefox浏览器FLASH透明背景的方法

下载排行榜: 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 简洁效果多图切换flash幻灯焦点图代码; 带标题和数字导航的JS焦点幻灯特效代码; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 31款简单实用的CSS+JS下拉菜单脚本; 3D立体效果金字塔环形旋转的flash+xml相册代码; 基于jQuery实现的瀑布流布局列表特效代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 超酷的3D摩天轮flash+xml相册幻灯图片代码; 能沿多个方向滑动切换的jquery幻灯代码; 自带多种幻灯效果支持缩略图导航的jquery画...; 可改图片尺寸和张数的flash幻灯轮换代码; 很好看的带缓冲效果CSS下拉菜单导航代码; 基于jquery很有趣的360度全景图片预览特效; 6屏幻灯上下滑动式带缩略图和文字介绍的fla...