某些浏览器强制请求的离线缓存化

某些浏览器强制离线缓存化!

1)问题发现:

  在android自带浏览器、ios自带浏览器和safari浏览器中发现问题:当给一个script指定了src,如果第一次加载失败,则后续同样请求的script标签均不再发生http请求,此后的请求更像一个读取离线缓存请求。这样,如果服务器端内容更新,则浏览器上无法同步。

  但chrome、ie等没有此现象,其它具有src或者href的标签或许也有此问题,等后续验证。

 

  这样导致请求重试功能完全失效。当然解决方法可以是:添加如时间戳、随机数等,使每次请求的url变换,跳过此问题。

2)验证问题地址和说明:

  这里附带一个我们内部测试的内容,由于服务器端不稳定,因此常常返回两种结果,所以能说明问题,或者大家做一个服务,返回不同的请求时间更能说明问题:

 http://61.155.178.182:8089/?url=http://www.techweb.com.cn/rss/morning.xml&m=1&var=d
说明:此请求可能返回两种结果,变量d一个包含code标签,一个不包含。但是http头均为200:
    1-1)var d={title:"suv...."};
    1-2)var d={code:-1}
    因此控制台打印的结果可能是:code:-1 和 code:undefined
    

3)测试和结果:

3-1)测试一:连续静态script请求:五个串行的script,所有浏览器均只请求一次http请求。这个可以说的过去。

<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <TITLE> script cache </TITLE>
  <script type="text/javascript" src='http://61.155.178.182:8089/?url=http://www.techweb.com.cn/rss/morning.xml&m=1&var=d' onload="console.log('code:'+d.code);"></script>
  <script type="text/javascript" src='http://61.155.178.182:8089/?url=http://www.techweb.com.cn/rss/morning.xml&m=1&var=d' onload="console.log('code:'+d.code);"></script>
  <script type="text/javascript" src='http://61.155.178.182:8089/?url=http://www.techweb.com.cn/rss/morning.xml&m=1&var=d' onload="console.log('code:'+d.code);"></script>
  <script type="text/javascript" src='http://61.155.178.182:8089/?url=http://www.techweb.com.cn/rss/morning.xml&m=1&var=d' onload="console.log('code:'+d.code);"></script>
  <script type="text/javascript" src='http://61.155.178.182:8089/?url=http://www.techweb.com.cn/rss/morning.xml&m=1&var=d' onload="console.log('code:'+d.code);"></script>
 
 </HEAD>

 <BODY>
    
 </BODY>
</HTML>

因此结果5条请求均一样,结果可能是以下两种之一:

    

3-2)测试二:动态加入script

<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <TITLE> script cache </TITLE>
   <SCRIPT>
  <!--

    function test(){
        var s = document.createElement("script");
        s.setAttribute("type", "text/javascript");
        //s.src='http://61.155.178.182:8089/?url=http://www.techweb.com.cn/rss/morning.xml&m=1&var=d'+ '&time='+Date.now();
        s.src='http://61.155.178.182:8089/?url=http://www.techweb.com.cn/rss/morning.xml&m=1&var=d';
        s.onload = function(){
            console.log('code:'+d.code);
        }
        document.body.appendChild(s);
    }
  //-->
  </SCRIPT>
 </HEAD>

 <BODY>
    <div onclick='test()' id="div1" style="position:relative;width:200px;height:200px;background-color:green;left:100px;top:100px;">
        控制台根据访问可能打印出以下了两种情况:<br/>
            1)code:-1;<br/>
            2)code:undefined;<br/><br/>
        点击我动态写入script
    </div>
 </BODY>
</HTML>

点击绿色div后,结果如下:

  3-2-1)在android自带浏览器、ios自带浏览器和safari浏览器下如下结果

  

  3-2-2)在ie和chrome等浏览器中,结果随点击的不同而不同:

 

 

总结:safari等浏览器,看到相同的url,就不向服务器端发送请求,而是拿本地的离线缓存,此法欠妥。

 

ps:测试的浏览器版本:ie9,chrome19,safari5.1.4,ios5自带safari,android2.*自带浏览器。

 

 

 

 

     

 

 

posted @ 2012-06-17 17:19  @si  阅读(2686)  评论(0编辑  收藏  举报