HTML5的页面资源预加载技术(Link prefetch)加速页面加载

标签: HTML5教程 Link prefetch 预加载 | 发表时间:2014-05-04 01:25 | 作者:sxwgf
分享到:
出处:http://www.html5tricks.com

不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时间,JavaScript压缩,使用CDN等。我曾经介绍过本站上使用的一些速度优化技术。而在 HTML5里,出现了一个新的用来优化网站速度的新功能:页面资源预加载/预读取(Link prefetch)。

页面资源预加载/预读取(Link prefetch)是什么?来自 MDN的解释:

页面资源预加载(Link prefetch)是浏览器提供的一个技巧,目的是让浏览器在空闲时间下载或预读取一些文档资源,用户在将来将会访问这些资源。一个Web页面可以对浏览器设置一系列的预加载指示,当浏览器加载完当前页面后,它会在后台静悄悄的加载指定的文档,并把它们存储在缓存里。当用户访问到这些预加载的文档后,浏览器能快速的从缓存里提取给用户。

简单说来就是:让浏览器预先加载用户访问当前页后极有可能访问的其他资源(页面,图片,视频等)。而且方法超级的简单!

HTML5页面资源预加载(Link prefetch)写法

<!-- 预加载整个页面 -->
<link rel="prefetch" href="http://www.webhek.com/misc/3d-album/" />

<!-- 预加载一个图片 -->
<link rel="prefetch" href=" http://www.webhek.com/wordpress/
wp-content/uploads/2014/04/b-334x193.jpg " />

HTML5页面资源预加载/预读取(Link prefetch)功能是通过 Link标记实现的,将 rel属性指定为“prefetch”,在 href属性里指定要加载资源的地址。火狐浏览器里还提供了一种额外的属性支持:

<link rel="prefetch alternate stylesheet" 
title="Designed for Mozilla" href="mozspecific.css" />
<link rel="next" href="2.html" />

HTTPS协议资源下也可以使用prefetch。

什么情况下应该预加载页面资源

在你的页面里加载什么样的资源,什么时候加载,这完全取决于你。下面是一些建议:

  • 当页面有幻灯片类似的服务时,预加载/预读取接下来的1-3页和之前的1-3页。
  • 预加载那些整个网站通用的图片。
  • 预加载网站上搜索结果的下一页。

禁止页面资源预加载(Link prefetch)

火狐浏览器里有一个选项可以禁止任何的页面资源预加载(Link prefetch)功能,你可以这样设置:

user_pref("network.prefetch-next", false);

页面资源预加载(Link prefetch)注意事项

下面是一些关于页面资源预加载(Link prefetch)的注意事项:

  • 预加载(Link prefetch)不能跨域工作,包括跨域拉取cookies。
  • 预加载(Link prefetch)会污染你的网站访问量统计,因为有些预加载到浏览器的页面用户可能并未真正访问。
  • 火狐浏览器从2003年开始就已经提供了对这项预加载(Link prefetch)技术的支持。

利用浏览器空闲时间加载一些额外的资源文件,看起来是既刺激又危险,你想试试这些技术吗?

原文来自: webhek

相关 [html5 资源 技术] 推荐:

HTML5的页面资源预加载技术(Link prefetch)加速页面加载

- - HTML5资源教程
不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉. 有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时间,JavaScript压缩,使用CDN等. 我曾经介绍过本站上使用的一些速度优化技术.

HTML5中的CSS Shader技术

- SUN - Solidot
Panggit 写道 "Adobe在Photoshop和Flashplayer等产品中运用了2D Shader技术来丰富它们的滤镜和动画,现在Adobe也将这种技术运用到了CSS中并将CSS Shaders提案提交给了W3C. 运用这项技术,可以轻松实现类似纸张折叠(视频),弯曲(视频)等3D效果,并运用在CSS动画中.

7个有用的HTML5学习资源

- huyun - 博客园新闻频道
  虽然HTML5还是很新,没有被所有主要浏览器支持,但现在还是有许多设计师和开发人员使用. 毫无疑问,几年下来,HTML5将对web开发起着很重要的作用. 我注意到很多人都在使用它,但也有许多人还没有接触过HTML5. 为了帮助学习这个任务,我们收集了7个有用的HTML5学习资源.   一、HTML5开发者指南.

W3C批评苹果专利HTML5技术

- ashuai - Solidot
苹果是W3C成员,根据W3C的专利政策,成员提供的技术必须免专利费,以确保Web标准可供任何人使用. 然而,苹果却专利了两项HTML5技术:专利申请号No.11/432,295和专利7,743,336. 苹果申请的专利是Widget Access Request Policy的核心组成,前者是移动应用的访问控制,后者是Widget安全.

HTML5的新特性,技巧及技术

- Amo - HTML5研究小组
过去的HTML 已经难以满足现代 Web 应用的需要,事实上,这个协议已经有超过 10 年没有更新了. HTML5 的出现旨在解决 Web 中的交互,媒体,本地操作等问题,一些浏览器已经尝试支持 HTML5 的一些功能,而开发者们有望最终从那些 Web 插件中得到解脱. 作为一个使用HTML5的开发人员下面这27条html5的新特性和技巧及技术,你有必要去了解.

欧朋HTML5体验版 引发移动浏览技术变革

- - HTML5研究小组
2011年12月29日,北京——如果你是个“技术达人”,那么HTML5你一定不陌生. 作为新一代的网页技术标准,HTML5拥有革命性的优势,它无需任何插件就可以直接在浏览器里实现包括视频、动画特效在内的丰富呈现效果. 今天,在中国举办的第一次以HTML5为主题的年度盛会——“HTML5年度Home Party暨首届原创游戏大赛颁奖典礼”上,欧朋手机浏览器正式推出欧朋浏览器HTML5体验版(“欧朋H5体验版”),全面支持HTML5,将完美的HTML5体验带入移动浏览中.

关于HTML5技术常见的几个误解

- - 脚本爱好者
最近2周,公司的测试PM带领我们使用HTML5 Canvas为公司的大屏幕制作一个展示公司历史和发展的apps. 主要技术是HTML5 Canvas和Javascript. 可能大家觉得Canvas标签就几个api,完成不了什么工作. 其实如果你对Javascript掌握的比较好,是可以用Javascript加上Canvas制作出像Flash动画的效果.

谷歌开发技术推广部经理胡坤:HTML5与Cocos2d-X

- - 博客园_新闻
3月 31 日消息,Google 开发技术推广部经理胡坤在第四届 Cocoachina 开发者大会发表题为“HTML5与 Cocos2d-X”的主题演讲. 先做一下自我介绍,我是 Google 的工程师我叫胡坤,我是 06 年加入 Google 中国,今天我跟我的同事一块儿来的,我们外面有展台,如果大家有什么问题可以跟我们沟通.

Crocodoc推HTML5文档嵌入技术,Dropbox, Yammer, SAP已在使用

- - 雷锋网
从YC毕业的 Crocodoc正推出一项新的技术,旨在将企业级的HTML5的office或者PDF嵌入基于web的产品中. 该公司最初利用基于Flash的技术让你上传一份PDF,在浏览器中可以获得一个相同版本的文档,并且可以和同事一起实时协同共享,添加备注等. Crocodoc在2010年成立,目标是干掉Acrobat.

King.com产品经理谈HTML5技术发展潜力

- - GamerBoom.com 游戏邦
作者:Joe Osborne. 作为一种用于创造网页游戏的新工具,HTML5已经成为了2012年社交游戏领域的一大热词. King.com最近发布于Facebook的《Pyramid Solitaire Saga》便是一款基于HTML5技术的游戏(游戏邦注:但德国社交游戏开发商Wooga则在最近宣布放弃HTML5),该公司产品经理Levina Nilsson在最近媒体采访中解释了King.com看好HTML5技术的原因.