测试环境和工具   chromium  18.0.1025.151 (开发编译版 130497 Linux) Ubuntu 11.04

一、测试内容

1.A页面manifest缓存的js文件，B页面不设manifest是否能使用缓存的js文件

2.A页面和B页面分别使用两个不同的manifest文件，但都缓存了同一个js文件，两页面更新缓存时，是否会相互影响？

3.两个页面使用同一个manifest文件，是否是共用一份缓存？

二、详细测试

     1、A页面manifest缓存的js文件，B页面不设manifest是否能使用缓存的js文件 ？

先上文件

cache.html

  1. <html manifest="m.manifest">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  4. <script type="text/javascript" src="m.js"></script>
  5. </head>
  6. <body>
  7. ver:1<p>
  8. <input type="button" value="shwo_ver" onclick="show_ver();" /><p>
  9. <input type="button" value="load_js" onclick="load_js();" /><p>
  10. <input type="button" value="is_online" onclick="is_online();" /><p>
  11. </body>
  12. </html>

un_cache.html

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  4. <script type="text/javascript" src="m.js"></script>
  5. </head>
  6. <body>
  7. ver:1<p>
  8. <input type="button" value="shwo_ver" onclick="show_ver();" /><p>
  9. <input type="button" value="load_js" onclick="load_js();" /><p>
  10. <input type="button" value="is_online" onclick="is_online();" /><p>
  11. </body>
  12. </html>

m.manifest

  1. CACHE MANIFEST
  2. # VERSION
  3. # 直接缓存的文件dd
  4. CACHE:
  5. m.js
  6. m1.js
  7. # 需要在时间在线的文件
  8. NETWORK:
  9. # 替代方案
  10. FALLBACK:

m.js

  1. var ver = "1";
  2. function show_ver() {
  3. alert(ver);
  4. }
  5. function load_js() {
  6. javascript:void((function(){var e=document.createElement('script');e.setAttribute('src','m1.js');document.body.appendChild(e);})())
  7. }
  8. function is_online() {
  9. alert(navigator.onLine);
  10. }

测试方法：

分别访问cache.html和un_cache.html, 查看js版本都是为“1”.

然后修改m.js的版本为“2”.

刷新两个页面再次查看，cache.html显示为“1”， 而un_cache.html显示为“2”

测试结论：manifest建立的缓存文件，不会被没有manifest的页面读取。

2.A页面和B页面分别使用两个不同的manifest文件，但都缓存了同一个js文件，两页面更新缓存时，是否会相互影响？

新增两个文件

cache1.html

  1. <html manifest="m1.manifest">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  4. <script type="text/javascript" src="m.js"></script>
  5. </head>
  6. <body>
  7. ver:1<p>
  8. <input type="button" value="shwo_ver" onclick="show_ver();" /><p>
  9. <input type="button" value="load_js" onclick="load_js();" /><p>
  10. <input type="button" value="is_online" onclick="is_online();" /><p>
  11. </body>
  12. </html>

m1.manifest

  1. CACHE MANIFEST
  2. # VERSION
  3. # 直接缓存的文件dd
  4. CACHE:
  5. m.js
  6. m1.js
  7. # 需要在时间在线的文件
  8. NETWORK:
  9. # 替代方案
  10. FALLBACK:

测试方法：

改动一下两个manifest文件，访问cache.html和cache1.html,确保都建立新缓存，并且显示js版本号一致；

修改m.js的版本号，并改动一下m.manifest文件；

刷新cache.html和cache1.html，并再次查看js版本号，发现cache.html的版本号变了，但cache1.html的版本号没有变化。

测试结论：不同manifest文件的缓存，不会相互之间有影响

3.两个页面使用同一个manifest文件，是否是共用一份缓存？

新增cache2.html代码完全同cache.html.

测试方法：

访问cache.html和cache2.html，并确保都是显示最新js版本“4”；

修改js版本为“5”，并改动没m.manifest文件；

刷新cache.html，显示js版本为“5”；

修改js版本为“6”， 然后刷新cache2.html，显示js版本为“5”，而不是“6”.

测试结论：同一manifest文件的缓存只有一份，被多个页面使用时也是如此

三、总结

通过以上测试，我们有理由可以这么认为：一个manifest文件会创建一份缓存，不同的manifest文件其缓存的内容是互不干扰的。这些特性应该有相关文档说明的，但可惜我没有找到有，若大家找到有，请分享给我一下。

一、测试内容

1.manifest文件改动后，浏览器在什么时候更新缓存？

2.一个新页面使用已有的manifest文件（其他页面使用的，并且已经创建好缓存），初次访问时，会引起整个缓存更新吗？

二、详细测试

 1.manifest文件改动后，浏览器在什么时候更新缓存？

使用测试（一）的cache.html, m.js, m.manifest三个文件。js版本号1。

测试过程：

访问cache.html,确保缓存数据是最新的；

修改m.js让版本号为“2”，并修改m.manifest文件（改动一下注释即可）；

刷新cache.html, 查看js版本是“1”，但chrom的console提示更新缓存了；

修改m.js让版本号为“3”，再次刷新cache.html， 查看js的版本号是“2”，chrom的console没有提示有缓存更新；

修改m.js让版本号为“4”，再次刷新cache.html， 查看js的版本号是“2”.

测试结论：浏览器检测到manifest文件有变化时，会更新缓存，但更新策略是先读取旧缓存显示出来，然后再更新。

      2.一个新页面使用已有的manifest文件（其他页面使用的，并且已经创建好缓存），初次访问时，会引起整个缓存更新吗？

在上一个测试的基础上，继续测试。

测试过程：

新建文件cache3.html，代码同cache.html;

访问cache3.html，查js版本号结果为“4”（最新文件的版本号）；

修改m.js代码使版本号为“5”，刷新cache3.html,查看js版本号结果为“2”（缓存里的版本号）；

测试结论：新页面使用旧manifest文件，初次访问时，不会造成旧缓存数据更新，并且加载的是实时加载线上资源的。再次访问时将使用旧缓存数据。

html5中manifest特性测试的更多相关文章

  1. HTML 5 应用程序缓存（Application Cache）cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存，不同的manifest文件其缓存的内容是互不干扰的

    HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...

  2. HTML5中引入的关键特性

    新特性 描述 accesskey 定义通过键盘访问元素的快捷键 contenteditable 该特性设置为true时,浏览器应该允许用户编辑元素的内容.不指定变化后的内容如何保存 contextme ...

  3. HTML5 中的新特性：

    一,用于绘画的 canvas 元素,<canvas>标签替代Flash Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件.<canvas>标签 ...

  4. 测试开发之前端——No2.HTML5中的标签

    HTML5中的标签. 标签 描述 <!--...--> 定义注释. <!DOCTYPE>  定义文档类型. <a> 定义超链接. <abbr> 定义缩写 ...

  5. HTML5 中 40 个最重要的技术点

    介绍 我是一个ASP.NET MVC的开发者,最近在我找工作的时候被问到很多与HTML5相关的问题和新特性.所以以下40个重要的问题将帮助你复习HTML5相关的知识. 这些问题不是你得到工作的高效解决 ...

  6. HTML5中的DOMContentLoaded 和 touchmove

    Html5的出现确实解决了一部分页面交互的问题,同时它的一些特性还是没能被我们掌握,今天主要聊聊Html5中的DomcontenLoaded和touchmove事件的属性和使用: DomcontenL ...

  7. 小强的HTML5移动开发之路（2）——HTML5的新特性

    来自:http://blog.csdn.net/dawanganban/article/details/17592787 一.画布(Canvas) 画布是网页中的一块区域,可所以用JavaScript ...

  8. html5中script的async属性

    html5中script的async属性 我兴奋于html5的原因之一是一些久久未能实现的特性现在可以真正运用于实际项目中了. 如我们使用placeholder效果蛮久了但是那需要javascript ...

  9. 在HTML5中如何提高网站前端性能

    1.    用web storage替换cookiesCookie最大的问题是每次都会跟在请求后面.在HTML5中,用sessionStorage和localStorage把用户数据直接在客户端,这样 ...

随机推荐

  1. MFC 最大化 的时候控件 按比例变大

    在dlg类头文件中声明CPoint Old; 在BEGIN_MESSAGE_MAP()和END_MESSAGE_MAP()声明一个映射:ON_WM_SIZE() 这样以后就可以在M_SIZE事件的时候 ...

  2. CVPR2015文章下载

    http://www.cv-foundation.org/openaccess/content_cvpr_2015/html/Liu_Real-Time_Part-Based_Visual_2015_ ...

  3. BNUOJ 1037 精神控制

    XsuagrX喜欢到处唬人,各种唬.这不,经过刻苦修炼,他终于掌握了Bane Element的Ultra绝技加强版,恶魔掌控(快捷键F)(YY中&……).当XsugarX对某个人胡言乱语Q@# ...

  4. HDOJ 1026 dfs路径保存

    #include<cstdio> #include<cstring> #include<cmath> ][]; #define inf 0xffffff int n ...

  5. Moebius集群:SQL Server一站式数据平台

    一.Moebius集群的架构及原理 1.无共享磁盘架构 Moebius集群采用无共享磁盘架构设计,各个机器可以不连接一个共享的设备,数据可以存储在每个机器自己的存储介质中.这样每个机器就不需要硬件上的 ...

  6. ios7技巧：你需要掌握的19个iOS7使用技巧

    从右往左滑动屏幕,可看到信息收到的时间. 指南针应用还可以用作水平仪,滑动屏幕即可. 被苹果称作Spotlight的搜索功能有所改变.在屏幕中间向下滑动即可打开该项功能,你可以搜索文本.邮件.应用.歌 ...

  7. Android 中4种屏幕尺寸

    具体信息,请参考 Android 官方文档 Supporting Multiple Screens small(屏幕尺寸小于3英寸左右的布局),  normal(屏幕尺寸小于4.5英寸左右), lar ...

  8. iOS 用protocol 和 用继承小体会

    最近写程序时,2个类都有相同的函数,又因为在用oc,所以就用了protocol来实现.后来发现其实这2个类除了相同的函数,还需要一些相同的变量,当初用继承的话会更简单.

  9. Win7下虚拟机个人使用小结：Virtual PC，VMware和VirtualBox

    想来用了很多年的虚拟机了,换了Win7之后,种种原因又需要使用虚拟机,这里就简单介绍和比较一下. 点击小图看大图. Virtual PC: 如果想做Windows虚拟机的话,Virtual PC在之前 ...

  10. python scrapy cannot import name xmlrpc_client的解决方案，解决办法

    安装scrapy的时候遇到如下错误的解决办法: "python scrapy cannot import name xmlrpc_client" 先执行 sudo pip unin ...