html5中manifest特性测试
测试环境和工具 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
- <html manifest="m.manifest">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
- <script type="text/javascript" src="m.js"></script>
- </head>
- <body>
- ver:1<p>
- <input type="button" value="shwo_ver" onclick="show_ver();" /><p>
- <input type="button" value="load_js" onclick="load_js();" /><p>
- <input type="button" value="is_online" onclick="is_online();" /><p>
- </body>
- </html>
un_cache.html
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
- <script type="text/javascript" src="m.js"></script>
- </head>
- <body>
- ver:1<p>
- <input type="button" value="shwo_ver" onclick="show_ver();" /><p>
- <input type="button" value="load_js" onclick="load_js();" /><p>
- <input type="button" value="is_online" onclick="is_online();" /><p>
- </body>
- </html>
m.manifest
- CACHE MANIFEST
- # VERSION
- # 直接缓存的文件dd
- CACHE:
- m.js
- m1.js
- # 需要在时间在线的文件
- NETWORK:
- # 替代方案
- FALLBACK:
m.js
- var ver = "1";
- function show_ver() {
- alert(ver);
- }
- function load_js() {
- javascript:void((function(){var e=document.createElement('script');e.setAttribute('src','m1.js');document.body.appendChild(e);})())
- }
- function is_online() {
- alert(navigator.onLine);
- }
测试方法:
分别访问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
- <html manifest="m1.manifest">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
- <script type="text/javascript" src="m.js"></script>
- </head>
- <body>
- ver:1<p>
- <input type="button" value="shwo_ver" onclick="show_ver();" /><p>
- <input type="button" value="load_js" onclick="load_js();" /><p>
- <input type="button" value="is_online" onclick="is_online();" /><p>
- </body>
- </html>
m1.manifest
- CACHE MANIFEST
- # VERSION
- # 直接缓存的文件dd
- CACHE:
- m.js
- m1.js
- # 需要在时间在线的文件
- NETWORK:
- # 替代方案
- 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特性测试的更多相关文章
- HTML 5 应用程序缓存(Application Cache)cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存,不同的manifest文件其缓存的内容是互不干扰的
HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...
- HTML5中引入的关键特性
新特性 描述 accesskey 定义通过键盘访问元素的快捷键 contenteditable 该特性设置为true时,浏览器应该允许用户编辑元素的内容.不指定变化后的内容如何保存 contextme ...
- HTML5 中的新特性:
一,用于绘画的 canvas 元素,<canvas>标签替代Flash Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件.<canvas>标签 ...
- 测试开发之前端——No2.HTML5中的标签
HTML5中的标签. 标签 描述 <!--...--> 定义注释. <!DOCTYPE> 定义文档类型. <a> 定义超链接. <abbr> 定义缩写 ...
- HTML5 中 40 个最重要的技术点
介绍 我是一个ASP.NET MVC的开发者,最近在我找工作的时候被问到很多与HTML5相关的问题和新特性.所以以下40个重要的问题将帮助你复习HTML5相关的知识. 这些问题不是你得到工作的高效解决 ...
- HTML5中的DOMContentLoaded 和 touchmove
Html5的出现确实解决了一部分页面交互的问题,同时它的一些特性还是没能被我们掌握,今天主要聊聊Html5中的DomcontenLoaded和touchmove事件的属性和使用: DomcontenL ...
- 小强的HTML5移动开发之路(2)——HTML5的新特性
来自:http://blog.csdn.net/dawanganban/article/details/17592787 一.画布(Canvas) 画布是网页中的一块区域,可所以用JavaScript ...
- html5中script的async属性
html5中script的async属性 我兴奋于html5的原因之一是一些久久未能实现的特性现在可以真正运用于实际项目中了. 如我们使用placeholder效果蛮久了但是那需要javascript ...
- 在HTML5中如何提高网站前端性能
1. 用web storage替换cookiesCookie最大的问题是每次都会跟在请求后面.在HTML5中,用sessionStorage和localStorage把用户数据直接在客户端,这样 ...
随机推荐
- 在html中注释对 <include XXXXXXXX />是没有影响的
在html中注释对 <include XXXXXXXX />是没有影响的
- 如何用ssh挂载远程目录
如何用ssh挂载远程目录 标签: sshserver服务器linux网络 2011-06-24 10:05 2979人阅读 评论(0) 收藏 举报 版权声明:本文为博主原创文章,未经博主允许不得转载. ...
- 【Python】python 普通继承方式和super继承方式
Python中对象方法的定义很怪异,第一个参数一般都命名为self(相当于其它语言的this),用于传递对象本身,而在调用的时候则不必显式传递,系统会自动传递.举一个很常见的例子:>>&g ...
- Python egg
http://blog.csdn.net/turkeyzhou/article/details/8876658
- Selenium测试Ajax程序(转)
上周末参加了Qclub的百度技术沙龙,听了百度的孙景卫讲了Web自动化测试,讲的非常好,然后在小组讨论时又有幸座在了一起.我们讨论的一个内容,就是Ajax应用程序比原来的非Ajax程序更不易测试,这里 ...
- codeforces A. Cinema Line 解题报告
题目链接:http://codeforces.com/problemset/problem/349/A 题目意思:题目不难理解,从一开始什么钱都没有的情况下,要向每一个人售票,每张票价格是25卢布,这 ...
- ubuntu命令行相关命令使用心得
一.Ubuntu解压缩zip,tar,tar.gz,tar.bz2 ZIP zip可能是目前使用得最多的文档压缩格式.它最大的优点就是在不同的操作系统平台,比如Linux, Windows以及Mac ...
- C++里的静态成员函数不能用const的原因
From http://blog.csdn.net/freeboy1015/article/details/7634950 static在c++中的第五种含义:用static修饰不访问非静态数 ...
- 谈谈Objective-C的警告 (转)
原文地址:http://onevcat.com/2013/05/talk-about-warning/ 一个有节操的程序员会在乎自己的代码的警告,就像在乎饭碗边上有只死蟑螂那样. ——@onevcat ...
- ctrl + z fg bg
[root@bass ~]# jobs [1]+ Stopped vncviewer 192.168.1.17:5904 [root@bass ~]# #ctrl + z [root@bass ~]# ...