页面缓存的范畴及原理

2024-04-27 14:10:05

字体：大中小

来源：转载

供稿：网友

页面缓存的范畴及原理

谈到页面性能优化，缓存机制是其中非常重要的一环。缓存可以使页面尽可能快地得到需要的文档，具有减轻带宽、降低服务的负荷、提高用户体验等功能。随着高级浏览器，尤其是移动端的发展，可用的缓存范畴逐渐变大，简单地将其分为三类：

一、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 Douchebagusing 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时间内是新鲜的