码迷,mamicode.com
首页 > 其他好文 > 详细

Link prefetching原理及性能测试

时间:2014-08-03 23:27:16      阅读:272      评论:0      收藏:0      [点我收藏+]

标签:android   des   style   blog   http   使用   os   strong   

背景:

       Link Prefetching  是 HTML 5的一个标准, 最早是由Mozilla 发布的一个互联网标准草案,link prefetching 现在是 W3C和WHATWG关于HTML 5中的一部分。网页可以嵌入 prefetching 标记,当浏览器加载完当前页面即结束加载网页,在浏览器闲置的时候会触发prefetching 标记的link,浏览器会在后台静默prefeching指定的documents, 并存储在cache中。 当用户访问到prefetched  documents时, cache中的内容会迅速被使用,加速网页展现。

触发Prefetch 语法:

<link rel="prefetch" href="http://www.cmcm.com"> prefetch cmcm </link>

HTTP link 语法:

Link: </images/big.jpeg>; rel=prefetch

HTML meta tag:   具体格式制定在 RFC 5988 Section 5

<meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch">

浏览器如何Prefetching & Web Developer Prefetching时机:

       前面提到过浏览器会在闲置的时机进行prefetching,Firefox在Mosilla1.2中使用nsIWebProgressListener API,我们可以注册顶层的nsIWebProgress 对象,通过这个我们可以接收到document start & stop 通知,我们可以取上次stop的document和下次document start 的近视闲置值作为一段时间间隔. 当onLoad 触发处理顶层document 时基本会触发上一次document stop通知, 这是我们开始prefetch 请求时机。 如果一个subframe 包含prefetching 标记,浏览器prefetching 不会立即开始而是直到top-most frame 及其所有的子frame 完成加载才会被触发。
    prefetching 是否适合你的站点取决于yourself.下面有几个建议:
(1).当一些列的页面只是slideshow,加载前后1-3个页面(前提是这些页面并不是大页面)
(2).在整个网站至始至终预加载大多数图片
(3).prefetching 你网站的搜索结果页

下面我们一起来看一下我们困惑的场景:

1.当用户点击一个正在Prefetching的link 浏览器是如何做处理的?
      当用户点击或者初始化页面加载, link prefetching 会停止并且所有的prefetch的操作会被丢弃。如果已经prefetch        document 是下载的一部分,那这部分document会被存储在cache中提供给服务器发送一个“Accept-Ranges:bytes"请     求报头使用。这个请求报头会被webservers在触发静态内容生成。当用户实时访问一个已经prefetched document,保   留部分 document 会被使用 HTTP byte-range 请求提取。
2.当用户在后台下载时,link prefetching 会抢带宽吗?
     yes and no. 如果你使用Mozilla浏览器下载, link prefetching 会被delayed直到后台所有下载完成。举例来说:你打  开几个tab加载网页包含prefetching标记,Mozilla会等待所有tab的页面加载完成后才会记性prefetch 请求。当你使用其  他  应用程序使用带宽,那么 prefetch会和其他应用程序竞争。这是个问题浏览器会有待改进,这里我们自己浏览器也  会进  行相应改进,比如在网络闲置情况下才进行prefetch。

使用prefetch的限制与开关:

1. 只有http,https才能使用prefetch, ftp协议不支持prefetch。
2. 只有html的 link标签支持 prefetch , <a></a> 等其他标签不支持。
3. 你可以通过js代码关闭prefetch 
user_pref("network.prefetch", false);
但是有个问题是目前虽然提供这个选项,但是大多数浏览器对这个选项支持是有问题的,换句话说即使开启这个选项,也有可能prefetching。
4.测试你的浏览器是否支持prefetching Test Prefetching

Link Prefetching 性能测试

测试环境:
小米2:
CM Browser
Android 4.1.1系统
site/page load time enable Prefetching none prefetching improve(%)
www.cmcm.com 6367 9470 65%
www.taobao.com 871 1112 87%

08-03 17:18:41.299: E/Timer(20970): pageStarted   http://www.cmcm.com/
08-03 17:18:41.399: E/Timer(20970): pageFinished  http://www.cmcm.com/
08-03 17:18:41.419: E/Timer(20970): pageStarted   http://www.cmcm.com/en-us/
08-03 17:18:47.675: E/Timer(20970): pageFinished  http://www.cmcm.com/en-us/

6367

08-03 17:20:07.631: E/Timer(21417): pageStarted   http://www.cmcm.com/
08-03 17:20:08.862: E/Timer(21417): pageFinished  http://www.cmcm.com/
08-03 17:20:08.882: E/Timer(21417): pageStarted   http://www.cmcm.com/en-us/
08-03 17:20:17.371: E/Timer(21417): pageFinished  http://www.cmcm.com/en-us/

9740
-----------------------------------------------------------------------------------------------
08-03 20:57:55.765: E/Timer(26875): pageStarted   http://www.taobao.com/
08-03 20:57:55.805: E/Timer(26875): pageStarted   http://m.taobao.com/?sprefer=sypc00
08-03 20:57:56.877: E/Timer(26875): pageFinished  http://m.taobao.com/?sprefer=sypc00

1112

08-03 21:00:45.817: E/Timer(27666): pageStarted   http://www.taobao.com/
08-03 21:00:45.867: E/Timer(27666): pageStarted   http://m.taobao.com/?sprefer=sypc00
08-03 21:00:46.688: E/Timer(27666): pageFinished  http://m.taobao.com/?sprefer=sypc00

871

通过我们自己的浏览器测试开启prefetching可以提高显著提高页面的加载速度。

转载请说明出处, 谢谢!  欢迎共同探讨.
http://blog.csdn.net/typename/article/details/38358765  powered  by miechal zhao. 




Link prefetching原理及性能测试,布布扣,bubuko.com

Link prefetching原理及性能测试

标签:android   des   style   blog   http   使用   os   strong   

原文地址:http://blog.csdn.net/typename/article/details/38358765

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!