为了加快浏览器的速度,在html5中我们可以设置页面链接预取,利用浏览器的空闲时间去下载用户即将要打开的连接,等用户真正打开的时候只需要显示出来即可,大大加快了浏览器的访问速度。我们本文讲述的内容是在Firefox环境下实现。 浏览器和开发人员都工同努力使得web浏览体验更快捷。使网站访问速度变快的众所周知的方法有很多,如使用CSS sprites和图片优化,使用htaccess来设置更长的缓存时间,javascript文件压缩,使用CDNs等等。Firefox引入了一种新的网站优化策略:链接预取。
简单地说,浏览器预先下载好用户浏览完当前页面后接下来可能会访问的文件(网页,图片等),并且这是很容易实现的。这项技术通常对于翻页等行为非常有用,手机上的UCWeb似乎也使用了这项技术,如针对cnbeta的新闻,网易的评论页等。 HTML5链接预取标签 <!-- 整个页面 --> <link rel="prefetch" href="http://rockux.com/archives/node-cannot-be-inserted-at-the-specified-point-in-the-hierarchy" /> <!-- 仅一张图片 --> <link rel="prefetch" href="<a href="../wp-content/uploads/2011/01/vim4s.png">http://rockux.com/wp-content/uploads/2011/01/vim4s.png</a>" /> HTML5预取通过LINK标签来实现,将要预取的内容作为rel和href的属性值就行了。 <link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" /> <link rel="next" href="/page/2" /> 预取同样支持HTTPS的内容。 那么什么时候需要预取呢?预取对于你的网站来说是否需要取决于网站自身的情况,不过这里有一些典型地使用场景供参考:
当然,Firefox也允许用户禁用链接预获取,禁用方法使用以下设置: user_pref("network.prefetch-next", false); 最后,在使用预获取时,还有以下几点需要我们注意:
|