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


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

    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;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.*自带浏览器。

     

     

         

  • 相关阅读:
    第二周作业
    十二周
    十一周
    第十周
    第九周
    第八周
    第七周
    第六周
    实验报告三
    第四周课程总结&试验报告(二)
  • 原文地址:https://www.cnblogs.com/withasi/p/2552735.html
Copyright © 2020-2023  润新知