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

2016-02-19 12:33 8 1 收藏

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的使用HTML5的链接预取功能(link prefetching)给网站提速,手机电脑控们准备好了吗?一起看过来吧!

【 tulaoshi.com - Web开发 】

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信息,但你需要在服务器端有什么东西能识别这种信息。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

来源:https://www.tulaoshi.com/n/20160219/1601176.html

延伸阅读
标签: Web开发
W3C 在 2008年 1 月 22 日发布了最新的 HTML 5 工作草案。HTML 5 工作组包括 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及数百个其他的开发商。HTML 5 中的一些新特性:嵌入音频、视频、图片的函数、客户端数据存储,以及交互式文档。其他特性包括新的页面元素,比如 header, section, footer, 以及 figure。 通过制...
标签: windows 操作系统
家知道,在Windows XP/2003操作系统中有一个名为prefetcher的服务,这是微软采用的一种全新系统后台数据预读机制,它可以提高系统性能,加快Windows XP/2003的启动速度,经过预读的程序全部存放在系统所在文件夹下的prefetcher目录中(图1),文件名格式类似于下面这个样子:FOXMAIL.EXE-2B721FDE.pf(这是Foxmail的预读文件)。Windows XP...
标签: Web开发
今天我们要学习的是使用Geolocation实现定位功能。我们可以通过navigator.geolocation获取Geolocation对象,他提供了下列方法: getCurrentPosition(callback,errorCallback,options):获取当前位置; watchPosition(callback,error,options):开始监控当前位置; clearWatch(id):停止监控当前位置。 note:下面例子使用的浏览器是chrome,...
标签: Web开发
HTML5的强大之一就是允许web程序申请一些临时或者永久的空间(Quota)在这里可以进行 数据的存储甚至文件的操作。 FileSystem提供了文件夹和文件的创建、移动、删除等操作,大大方便了数据的本地处理, 而且所有的数据都是在沙盒(sandboxed)中,不同的web程序不能互相访问,这就保证了数据 的完整和安全。 在CatWrite项目中,运用了HTML5的...
标签: Web开发
演示地址: HTML5拍照演示 首先,我们看看HTML代码结构,当然,这部分的DOM内容应该是在用户允许使用其摄像头事件出发后,动态加载生成的。 注意: 我们采用的是 640X480的分辨率,如果采用JS动态生成,那么您是可以灵活控制分辨率的。 代码如下: !-- 声明: 此div应该在允许使用webcam,网络摄像头之后动态生成 宽高: 640 *480,当然,...

经验教程

240

收藏

78
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部