代码改变世界

Application Cache API （二）

2012-06-14 09:31  BlackBird  阅读(2380)  评论(0)  编辑  收藏  举报

　　开这个博客的初衷主要是想沉淀一下我最近即将开展的对于HTML5及移动端性能方面的一些探索，而appcache我们更加关注的是缓存策略上对于性能的优化上的帮助，所以对于appcache的运行过程我们需要更加地清楚，昨天的Application Cache API （一）整体介绍了一下appcache，接下来会对appcache做一些黑盒测试，以便我们了解更多。

　　这个demo中主要涉及到3类资源，两个页面，我们观察3类资源在不同的场景下浏览器的appcache策略。

　demo代码：

　   test1.html如下：

<html manifest="manifest.appcache">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
   <title>demo</title>
</head>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
   applicationCache.onchecking = function(){
   console.log("checking")
}
applicationCache.ondownloading = function(){
   console.log("dowload")
}
applicationCache.onnoupdate = function(){
   console.log("noupdate")
}
applicationCache.onprogress = function(){
   console.log("progress")
}
applicationCache.oncached = function(){
   console.log("cached")
}
applicationCache.onupdateready = function(){
    console.log("updateready")
}
applicationCache.onobsolete = function(){
   console.log("obsolete")
}
applicationCache.onerror = function(){
   console.log("error")
}
</script>
<link rel="stylesheet" type="text/css" href="css/index.css" media="all" />
<body>
　　<div id="test">此处观察样式效果<div>
   <img src="img/index.jpg" />
   <img src="img/no-cache.jpg">
</body>
</html>

　　test2.html如下：

<html
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
   <title>demo</title>
</head>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
   applicationCache.onchecking = function(){
   console.log("checking")
}
applicationCache.ondownloading = function(){
   console.log("dowload")
}
applicationCache.onnoupdate = function(){
   console.log("noupdate")
}
applicationCache.onprogress = function(){
   console.log("progress")
}
applicationCache.oncached = function(){
   console.log("cached")
}
applicationCache.onupdateready = function(){
    console.log("updateready")
}
applicationCache.onobsolete = function(){
   console.log("obsolete")
}
applicationCache.onerror = function(){
   console.log("error")
}
</script>
<link rel="stylesheet" type="text/css" href="css/index.css" media="all" />
<body>
　　<div id="test">此处观察样式效果<div>
   <img src="img/index.jpg" />
   <img src="img/no-cache.jpg">
</body>
</html>
  • 我们在两个页面中对于applicationCache对象的事件进行了监听，并将当前触发的事件名输出到console中，以便我们了解发生了什么
  • 两者区别在于，一个引用了manifest，一个没有，用于进行对比。
  • js和css初始化为空，用于观察效果

 

结论及场景

　　1, application cache并不因服务器上资源改变而改变，只有manifest改变才会触发重新download，并且是所有cache文件均重新获取

　　　 正常载入test1.html时,console输出如下：

checking        /html5/appcache/:13
noupdate        /html5/appcache/:37

          当js，css和图片发生变化时，载入test1.html ，console不变：

checking        /html5/appcache/:13
noupdate        /html5/appcache/:37

　　　当manifest文件进行修改后，console如下：

checking                 /html5/appcache/:13
dowload                  /html5/appcache/:27
5 progress                /html5/appcache/:49
updateready              /html5/appcache/:67

 

　　2，对于另一个没有引用manifest文件的html，当它加载时，不会触发applicationCache的任何事件，但是会使用缓存。

　　页面加载的时候。console输入为空

　　修改服务器js，css等资源，页面中没有变化，修改manifest文件后，刷新页面，资源修改的效果出现。

　　

　　3，直接请求资源的绝对路径，只要该url被缓存过，那么所有的访问均是该资源的缓存，而与引用所在的宿主页面是否有manifest没有关系

　　给js中写上alert("更新")，访问该资源的url，结果没有变化

　　更新manifest之后，该js的访问得到更新

 

       4，js和css，图片文件的本身的访问，均会进行checking

　　直接在地址栏输入一个缓存的js文件，console显示如下：

Document was loaded from Application Cache with manifest http://localhost/html5/appcache/manifest.appcache
Application Cache Checking event
Application Cache NoUpdate event

　　

　　修改manifest文件后，再次访问这个资源。显示如下：

Document was loaded from Application Cache with manifest http://localhost/html5/appcache/manifest.appcache
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 4) http://localhost/html5/appcache/css/index.css
Application Cache Progress event (1 of 4) http://localhost/html5/appcache/js/index.js
Application Cache Progress event (2 of 4) http://localhost/html5/appcache/
Application Cache Progress event (3 of 4) http://localhost/html5/appcache/img/index.jpg
Application Cache Progress event (4 of 4) 
Application Cache UpdateReady event

     所有的资源，均被重新下载

 

　　经过反复试验后，我们可以总结出以下浏览器在应用缓存方面处理url的逻辑策略：

　　

 

     转载时，请注明原文地址 http://www.cnblogs.com/blackbird/archive/2012/06/14/2548810.html