分类导航

手机浏览器缓存和电脑浏览器缓存的问题记录

发布时间:2021-01-12 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了手机浏览器缓存和电脑浏览器缓存的问题记录编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

  一、背景描述:

  为了优化web网页速度,我们采取了js,css合并压缩,并在服务端控制。所以我就学习了一下,浏览器缓存的原理。

  因为我不想使用版本号控制,版本号具有诸多弊端:

       1.每次修改都得修改版本号。

       2.如果所有页面的引用,单独配置版本号,那么每次的修改量很大;

       3.如果为了避免2的问题,针对所有页面使用同一个熟悉配置,那么每次修改一个文件并更新版本号之后,所有的引用的版本号都更新了,太傻了。

    所以,不采取版本号控制,使用时间控制,页面引用不用变,目标文件发生了变化,服务器能告诉客户端浏览器。

     页面使用如下方式请求当前页面的css样式文件:

    <link type="text/css" rel="stylesheet"  href="<s:text name='compressURL'/>/dynamic.css?p=dd&urls=xxx,yyy" />

     服务器处理方法:

  1.由于使用版本号,在每次修改的时候都得修改版本号,嫌麻烦,所以采取在服务端使用文件修改时间控制,利用http的If-Modified-Since。

     2.检测文件修改时间,和浏览器传过来的If-Modified-Since比较,如果需要更新,返回200,向浏览器发送最新数据;

     3.如果不需要更新返回304 ,浏览器就会拿本地的缓存,不需要消耗流量和等待数据传输,节约时间和流量 (此处不详细描述,如何控制304和200具体实现)

    二、 出现问题

    PC端浏览器:一切正常,达到了最初的目的:样式文件没有更新则返回304,浏览器继续使用缓存;

        下次样式文件更新了,客户端浏览器请求时,将得到200的返回值并接收新的文件;

    手机端自带浏览器/微信里边的浏览器:部分手机行,部分手机不行。表现的现象为:第一次请求在本地缓存了样式文件,第二次样式文件修改了他也没有更新。

           我用多部手机测试,发现当服务端文件变动之后,小米2S手机能及时得到文件更新,同事三星机型也能及时得到最新文件,而IPHONE和华为的不行。

 经测试总结发现:IPHONE和华为的手机在第一次访问网页之后,就把样式文件缓存起来了,第二次直接没有变动(实际上根本就没有向服务器发送请求,没有询问服务器是否更新)

   即:1.电脑第一次访问的时候下载文件,以后每次会每次询问服务器是否更新,304则不更新,200则更新(可以完全在服务端控制)     

         2.部分手机端浏览器和微信里的浏览器,只在第一次访问的时候下载文件,只要url不改变,以后根本就没有再次请求(可能是浏览器为了给省流量,和提速);

    三、解决办法

    如果是电脑端使用,我这个解决方案,没问题,用的很爽;

   如果是手机访问,还是得加版本号,我之前就是嫌弃加版本号麻烦,所以才没采用,实在是没办法,只有让url地址发生改变 那个傻逼浏览器才发送请求,才能拿到新的文件。

  

 

 

总结

以上是编程之家为你收集整理的手机浏览器缓存和电脑浏览器缓存的问题记录全部内容,希望文章能够帮你解决手机浏览器缓存和电脑浏览器缓存的问题记录所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!