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

标签: HTML5教程 Link prefetch 预加载 | 发表时间:2014-05-04 09: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等. 我曾经介绍过本站上使用的一些速度优化技术.

7个有用的HTML5学习资源

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

玩转HTML5移动页面(动效篇)

- - 腾讯ISUX - 社交用户体验设计 - Better Experience Through Design
作为一名前端,在拿到设计稿时你有两种选择:. 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来. 作为一个有志向的前端,当然是选2啦. 可是需求时间又很短很短,怎么办呢. 这次就来谈谈一些动画设计的小技巧,能在你时间不多又没有动画想法的时候瞬间让页面增色不少. 同时也会谈及移动端H5页面的优化细节与关键点,因此本文章将分为 动效篇和.

HTML5基础,第2部分:组织页面的输入

- nixer - 译言-电脑/网络/数码科技
来源HTML5 fundamentals, Part 2: Organizing inputs. (译者注:由于yeeyan编辑器对文章中的标签做解析的原因,我在每个标签的空格,比如说,左尖括号<+fieldset+右尖括号>,我会写成< fieldset>,以便其能够在文章中正确显示,不便之处敬请谅解.

使用 HTML5 和 CSS3 制作登录页面完整步骤

- Amo - HTML5研究小组
本文详细介绍使用 HTML5 和 CSS3 制作一个登录页面的完整过程. 所用到的 HTML5 的特性:. placeholder – 输入框的简短提示,当该输入框获得输入焦点时,该提示信息自动消失. required – 指定该输入元素是否必须提供. autofocus – 指定输入框是否在页面加载完毕自动获取输入焦点.

BBC已经在新闻页面用HTML5取代Flash

- - HTML5研究小组
就在80% 的Web 视频已经被统计出采用HTML5 规范的今天,英国媒体BBC 宣布将其新闻网站中的所有页面改组成HTML5 规范,之前的Flash播放器及其内容将随之淡出. 这意味着BBC针对移动设备以及不同种类不同平台浏览器的兼容性将变得更好. 而业内担忧的是HTML5的控制功能并不完善,是否可以胜任视频传输的任务,此外HTML5没有Flash的DRM来控制版权视频的播放.

玩转HTML5移动APP页面(优化篇)

- - 设计达人
承接上文《 玩转HTML5移动APP页面(动效篇)》,上次说的是让页面动起来的一些小技巧. 而页面动起来的根基是功能可用的页面,因此有必要分享一些优化细节的技巧和方向,熟悉掌握一些方法论还是会对页面开发大大提高效率的,并且也能防止疏忽缺漏. 涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite).

42个非常有用的 HTML5 开发教程和学习资源

- - 博客园_梦想天空
如今,随着主流浏览器对 HTML5 的不断支持和完善,越来越多的开发者开始使用. HTML5 来开发各种功能强大的Web应用程序,HTML5 正引领互联网新革命. 为了方便大家更好的学习 HTML5 ,今天这篇文章向大家分享42个非常有用的. HTML5 开发教程和速查手册. 九个让人难以置信的HTML5和JavaScript实验.

使用HTML5里页面可见性接口判断用户是否正在观看你的页面

- - WebHek
长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法. 现在,HTML5里页面可见性接口就提供给了程序员一个方法,让他们使用 visibilitychange页面事件来判断当前页面可见性的状态,并针对性的执行某些任务. 同时还有新的 document.hidden属性可以使用. 这个新出现的 document.hidden属性,它显示页面是否为用户当前观看的页面,值为ture或false.

简历页面设计 和 简历设计模板资源

- 齐铭 - Design lol 全球设计精华分享
无论是找工作还是接项目, 简明雅致又能体现你独到之处的简历总是必不可少. 在线的简历页面也比邮件附件和纸质简历更为普遍使用. 这里除了提供一些简历页面的优秀设计, 还有许多设计模板资源. 30款惊艳的极简主义web设计. 15个极简主义web设计案例. 在facebook上找到你最爱的设计团队. 25个漂亮的blog评论区设计.