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

  一、背景描述:

  为了优化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地址发生改变 那个傻逼浏览器才发送请求,才能拿到新的文件。

  

 

 

时间: 2024-10-08 22:20:59

手机浏览器缓存和电脑浏览器缓存的问题记录的相关文章

浏览器缓存机制(2)-应用缓存

浏览器缓存机制(2)-应用缓存 在公司项目中,一些移动版的WEB页面恰好用到了应用缓存,故顺便写篇文章来总结下应用缓存方面的内容. 1.应用缓存简介 应用缓存(application cache)是HTML5提供的一套缓存机制,使得WEB应用可以离线运行.除了一些旧版本的IE外,现代浏览器如firefox,chrome,safari大部分都是支持HTML5标准的.使用应用缓存主要优势有: 离线浏览:用户可以在离线状态浏览网页内容. 速度更快: 因为数据存储在浏览器缓存中,浏览器只会下载服务器发生

浏览器因编码引起的缓存问题

测试 mysql_query  与 mysql_unbuffered_query的时间差问题的时候,做了一个简单的PHP连接mysql数据库的测试代码,文件编码是utf8,在chrome浏览器中,当把chrome浏览器的编码更改为utf8的情况下,刷新页面,获取的时间戳是不会改变的,在nginx服务器和代码之间找了很久也没发现问题,换成IE浏览器结果是好的.当使用chrome浏览器的编码浏览器默认打开的编码(页面的中文是乱码),则时间戳是会改变的.在PHP代码页面加上页面的编码,问题迎刃而解 p

web开发人员须知的web缓存知识–将数据缓存到浏览器端Net实现

现实中,服务器在向浏览器发送的数据中,一部分数据是不经常更新的,如果能将这部分数据缓存到浏览器端,将会大大降低传输的数据,提高应用的性能.通过Expires策略,可以使用HTTP 协议定义的缓存机制将数据缓存到浏览器中.下面我们看看Net是如何实现将数据缓存到浏览器中的. protected void Page_Load(object sender, EventArgs e) { if (Request.Headers["If-Modified-Since"] != null &

彻底理解浏览器的缓存机制(http缓存机制)

一.概述 浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下HTTP报文,HTTP报文分为两种: 同步sau交流学习社区(首发):https://www.mwcxs.top/page/565.html 1.HTTP请求(Request)报文,报文格式为:请求行 – HTTP头(通用信息头,请求头,实体头) – 请求报文主体(只有POST才有报文主体),如下图 HTTP响应(Response)报文,报文

浏览器以及对应的客户端缓存

通过这张图,我们晓得缓存分为以下几部分,客户端缓存,CDN缓存,反向代理缓存以及对应的本地缓存,分布式缓存等 前面我有介绍过 CND缓存 和 反向代理缓存,今天我们主要介绍一下浏览器缓存以及对应的本地缓存 1:客户端缓存一般指的是浏览器缓存,目的就是加速各种静态资源的访问,想想现在的大型网站,随便一个页面都是一两百个请求,每天 pv 都是亿级别,如果没有缓存,用户体验会急剧下降.同时服务器压力和网络带宽都面临严重的考验. 2:客户端缓存主要是HTTP协议定义的缓存机制(如 Expires, Ca

浏览器缓存机制(HTTP缓存机制)

其机制是根据HTTP报文的缓存标识进行的. 过程:浏览器发起HTTP请求 – 服务器响应该请求.那么浏览器第一次向服务器发起该请求后拿到请求结果,会根据响应报文中HTTP头的缓存标识,决定是否缓存结果,若是,则将请求结果和缓存标识存入浏览器缓存中. 缓存过程分为两个部分,分别是强制缓存和协商缓存. 一.强制缓存: 控制强制缓存的字段分别有 Expires: 表示未来资源会过期的时间.即当发起请求的时间超过了 expires 设定的时间,会发送请求到服务器重新获取资源.Http 1.0版本 Cac

HTML5调用手机摄像头,仅仅支持OPPOHD浏览器

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML5调用手机摄像头,仅仅支持OPPOHD浏览器</title> 6 <style> 7 #video { border: 1px solid #ccc; display:inline-block; } 8 #canvas

微信支付:手机系统自带的浏览器,调用微信支付如何实现(非扫码)

Q:翻看了微信支付的api没发现支持h5调支付接口的情况(微信js除外),然后却发现美团的支付成功调用了,这是怎么实现的?     A: 使用微信H5支付即可.H5支付通过URL调起微信APP,不涉及到应用签名,可解决一次申请给多款APP使用的问题,看看现在游戏分发行业就知道了. 现在从官网申请到的APP支付(即通过SDK调起微信APP),如果适用在公司只有几款APP的情况,完全没问题.但是如果一家公司有几十几百款APP的话,使用APP支付就不合适了.(APP支付要求申请APPID,但每家公司主

Cache缓存机制与文件缓存原理PHP2

原创文章,转载请注明: 转载自电商沙龙ec-shalom.com,专研电商艺术. 对缓存的概念一直不清不楚,导致在使用PHP写缓存的时候也很没感觉.这篇文章将全面介绍有关 缓存 ( 互动百科 | 维基百科 )cache以及利用PHP写缓存caching的技术. 什么是缓存Cache? 为什么人们要使用它? 缓存 Caches种类 浏览器缓存 Caches 代理缓存 Caches 缓存对网站的影响? 怎样正确地使用缓存? 网站缓存的工作原理 如何设置网站的缓存 Caches HTML Meta 标