谈到页面性能优化，缓存机制是其中非常重要的一环。缓存可以使页面尽可能快地得到需要的文档，具有减轻带宽、降低服务的负荷、提高用户体验等功能。随着高级浏览器，尤其是移动端的发展，可用的缓存范畴逐渐变大，简单地将其分为三类：
一、Application Cache
这是H5中的新特性，可以将页面资源缓存在本地，当页面处于离线状态下依然可以使用。使用方法很简单，大致分为2步：
<html mainfest="mainfest.appcache">
CACHE MANIFEST # 23-01-2015 v0.1 /style.css /logo.gif /script.js NETWORK: * FALLBACK: /server/ /fallback.html
但是目前来说，离线存储存在一些坑，曾经为了提高页面性能，使用过该技术，带来了很多问题，很快就删除不再使用，简单总结下目前离线存储的特点：
- 每个包含manifest的网页都会隐式添加到appCache中
- 一个文件找不到，整个appCache均被丢弃
- 即使online，也会使用appCache
- 更新页面，appCache文件本身必须修改，才能让浏览器刷新缓存文件
- 关于appCache的缺点可以查看文档：App cache is a Douchebag using the application cache
二、localStorage
在移动端，这个API被广泛使用，将一些长期不会发生改变的资源、历史记录保存在本地，通过在本地读取加速网页的访问速度。需要注意的是localStorage只能存储字符串，如果要缓存对象的话，需要通过JSON.stringify进行转换，使用的时候再进行解析。常用API如下：
a.方法： getItem()、setItem()、key()、removeItem()、clear() b. 事件：storage function changeStorage() { window.addEventListener(’storage’, ) } 注意：storage事件只有在新窗口打开时，数据真正发生变化时才会触发。也就是storage事件主要用于监听localStorage/sessionStorage数据变化时，通知其他窗口或者标签页，实现数据变更通知。
三、HTTP
谈到缓存会默认是HTTP缓存。首先看看HTTP缓存的大致流程：
在上图展示了HTTP使用缓存的过程，其中(3)、(4)环节存在是否判断，当均为true的时候才会直接使用本地缓存，其他情况请看下图。但是还是存在下面两个疑问：
- 如何判断是否足够新鲜
- 如何进行新鲜度验证？
3.1 文档新鲜度判断
在HTTP response中可能存在两个属性：Expires、Cache-Control，这两个属性决定了文档的有效期。如果当前时间满足有效期，则直接读取缓存文档，返回给客户端。
- 关于Expires: HTTP/1.0+定义该该属性，存储的是绝对日期，绝对日期依赖于计算机的时钟时间。因为不同主机的时间中存在差异，所以使用Expires可能会造成一些问题。
- 关于Cache-Control：HTTP/1.1中增加了该属性，该属性定义的时间是相对时间，因此就没有Expires的问题。Cache-Control存在如下几个常用属性
- no-cache: 除非对资源进行新鲜度检验，否则客户端不会使用已缓存的资源
- no-store: 缓存应尽快从存储器中删除，因为可能存在敏感信息
- max-age=number: 缓存在number时间内是新鲜的
3.2 新鲜度检验
新鲜度检验有两种方式：If-Modified-Since、If-No-Match，这两个数据存在于HTTP request Header中，通过与服务器端的对比来判断文档是否发生改变。
- If-Modified-Since：基于时间的比较，response Header与之对应的是Last-Modified。
- If-No-Match：基于实体标签进行比较，response Header与之对应的是Etag
3.3 缓存控制设置
通过在服务器端进行缓存的设置。以Apache为例，可以使用mod_headers、mod_expires、mod_cern_meta设置Expires或Cache-Control。
posted on
