引用静态资源时加上时间戳，处理浏览器缓存问题

项目问题

更新上传CSS文件或JS文件后，安卓手机浏览器刷新，页面样式没有改变

问题解决

利用PHP语言，在引用静态资源时加上时间戳

<link rel="stylesheet" type="text/css" href="css/style.css?time=<?php echo date("Ymd",time())?>"/>

 

八种浏览器缓存

浏览器缓存（Browser Caching）是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，整体上加速网页展示给用户。浏览器端缓存的机制种类较多，总体归纳为八种：

http缓存

http缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下，浏览器可以根据协议头中expires、etag、last-modified等响应头来判断从服务器端请求文件还是从本地读取文件。

适当的缓存控制可以提升用户体验，但当应用频繁升级时，无法确保用户使用最新的静态内容。

这个问题可以通过把改动过的静态资源重命名来解决。比如，为静态文件附加时间戳，从而让服务器认为是不同的请求。

application cache

HTML5的应用缓存，是专门为开发离线Web应用设计。

cookie

Cookie（或者Cookies），指一般网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）。cookie一般通过http请求中在头部一起发送到服务器端。一条cookie记录主要由键、值、域、过期时间、大小组成，一般用户保存用户的认证信息。cookie最大长度和域名个数由不同浏览器决定。

sessionStorage

sessionStorage对象主要用于针对会话的小段数据的存储。

localStorage

localStorage是html5的一种新的本地缓存方案，取代了globalStorage。一般用来存储ajax返回的数据，加快下次页面打开时的渲染速度。

IndexDB

webSql

CacheStorage

更多文章可以来我的个人博客里面看到

欢迎来访：绵绵小站

参考文章

1. 九种浏览器端缓存方法知多少
2. 浏览器缓存机制及一些缓存问题解决方法
3. 浏览器缓存机制详解
4. HTTP协议详解（真的很经典）
5. 《JavaScript高级程序设计（第三版）》第23章 离线应用与客户端存储 P627
6. 《高性能JavaScript》章节9.7缓存JavaScript文件 P171