不管是浏览器的开发者还是普通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)技术的支持。

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

HTML5的页面资源预加载技术(Link prefetch)加速页面加载的更多相关文章

  1. 使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度

    不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...

  2. 页面资源预加载(Link prefetch)功能加速你的页面加载速度

    有了浏览器缓存,为何还需要预加载? 用户可能是第一次访问网站,此时还无缓存 用户可能清空了缓存 缓存可能已经过期,资源将重新加载 用户访问的缓存文件可能不是最新的,需要重新加载 页面资源预加载/预读取 ...

  3. 转载:用Jquery实现的图片预加载技术,可以实现有序加载和无序加载!

    一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...

  4. 插件化开发—动态加载技术加载已安装和未安装的apk

    首先引入一个概念,动态加载技术是什么?为什么要引入动态加载?它有什么好处呢?首先要明白这几个问题,我们先从 应用程序入手,大家都知道在Android App中,一个应用程序dex文件的方法数最大不能超 ...

  5. 【腾讯Bugly干货分享】Android Linker 与 SO 加壳技术

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57e3a3bc42eb88da6d4be143 作者:王赛 1. 前言 Andr ...

  6. Android Linker 与 SO 加壳技术

    1. 前言 Android 系统安全愈发重要,像传统pc安全的可执行文件加固一样,应用加固是Android系统安全中非常重要的一环.目前Android 应用加固可以分为dex加固和Native加固,N ...

  7. AndroidLinker与SO加壳技术之上篇

    1. 前言 Android 系统安全愈发重要,像传统pc安全的可执行文件加固一样,应用加固是Android系统安全中非常重要的一环.目前Android 应用加固可以分为dex加固和Native加固,N ...

  8. android apk 防止反编译技术第一篇-加壳技术

    做android framework方面的工作将近三年的时间了,现在公司让做一下android apk安全方面的研究,于是最近就在网上找大量的资料来学习.现在将最近学习成果做一下整理总结.学习的这些成 ...

  9. Java 加解密技术系列文章

    Java 加解密技术系列之 总结 Java 加解密技术系列之 DH Java 加解密技术系列之 RSA Java 加解密技术系列之 PBE Java 加解密技术系列之 AES Java 加解密技术系列 ...

随机推荐

  1. 亚马逊副总裁谈Marketplace平台的个性化服务

    说到个性化,亚马逊无疑是挖掘与利用数据为消费者打造个性化网购体验的先驱之一.而现在,几乎所有的公司和网站都在利用更加个性化的推荐算法为用户提供更好的购物和浏览体验. 亚马逊近年来尤其重视将其个性化特性 ...

  2. Java SE ---流程控制语句

     java的控制流程有三种: 一,顺序流程             自上而下,按照代码的先后顺序执行 二,分支流程             1,if/else语句             2,swit ...

  3. 【阿里云产品公测】OTS使用之简单线上产品实践基于PythonSDK

    阿里云用户:morenocjm 实践是检验真理的唯一标准,学习技术需要通过实践过程中的不断尝试,才能够快速掌握要领.OTS是构建在阿里云飞天分布式系统之上的NoSQL数据库服务,提供海量结构化数据的存 ...

  4. 【Android 界面效果29】研究一下Android滑屏的功能的原理,及scrollTo和scrollBy两个方法

    Android中的滑屏功能的原理是很值得我们去研究的,在知道这两个原理之前,有必要先说说View的两个重要方法,它们就是scrollTo 和scrollBy. Android View视图是没有边界的 ...

  5. frame,bounds,center分析

    采用CGPoint来表示坐标系X,Y位置,创建一个坐标的方式为:CGPoint point=CGPointMake(x,y) CGSize用来表示视图的宽度和高度,可以用CGSizeMake(widt ...

  6. Android的Task和Activity相关

    android:allowTaskReparenting    用来标记Activity能否从启动的Task移动到有着affinity的Task(当这个Task进入到前台时)——“true”,表示能移 ...

  7. 1. RAID在数据库存储上的应用

    随着单块磁盘在数据安全.性能.容量上呈现出的局限,磁盘阵列(Redundant Arrays of Inexpensive/Independent Disks,RAID)出现了,RAID把多块独立的磁 ...

  8. NPOI--操作Excel之利器(一)

    最近在做一个产品配置的项目,类似于京东上的自主装机,也就是根据自己的需要配置一套完整的产品,只不过我们做的是一个网络产品的配置,如路由器,交换机等网络设备.配置完成后会将配置的信息导出到Excel中, ...

  9. 为Debug和Release分别设置Web.config

    需求:在开发asp.net应用程序时,往往想在debug和release环境下使用不同的配置,而web.config文件却只有一个 解决方案:可以在原来的web.config中写下debug环境下的配 ...

  10. Part 4 using entity framework

    Step1: Install entity framework using nuget package manager. Step2: Add a class file to the Models f ...