性能优化之缓存

138 阅读2分钟

网络层面的缓存

1. 强缓存

强缓存主要是采用响应头中的Cache-Control和Expires两个字段进行控制的。其中Expires是HTTP 1.0中定义的,它指定了一个绝对的过期时期。而Cache-Control是HTTP 1.1时出现的缓存控制字段。Cache-Control:max-age定义了一个最大使用期,就是从第一次生成文档到缓存不再生效的合法生存日期。由于Expires是HTTP1.0时代的产物,因此设计之初就存在着一些缺陷,如果本地时间和服务器时间相差太大,就会导致缓存错乱。这两个字段同时使用的时候Cache-Control的优先级给更高一点。 这两个字段的效果是类似的,客户端都会通过对比本地时间和服务器生存时间来检测缓存是否可用。如果缓存没有超出它的生存时间内,客户端就会直接采用本地的缓存。如果生存日期已经过了,这个缓存也就宣告失效。接着客户端将再次与服务器进行通信来验证这个缓存是否需要更新。补充:刷新,后退会跳过缓存。

2. 协商缓存

强缓存机制如果检测到缓存失效,就需要进行服务器再验证。这种缓存机制也称作协商缓存。浏览器在第一次获取请求的时候,就会在响应头中携带上资源的上次服务器修改日期(Last-Modified)或者资源的标签(Etag)。后续的请求服务器会根据请求头上的If-Modified-Since(对应Last-Modified)和(If-None-Match)字段来判断资源是否失效,一旦资源过期,则服务器会重新发送新的资源到客户端上,从而保证资源的有效性。 需要注意的是当响应头中同时存在Etag和Last-Modified的时候,会先对Etag进行比对,随后才是Last-Modified。

3. CDN缓存

CDN主要用来缓存静态资源的服务器,用户发送请求的时候,会优先从距离请求最近的cdn返回静态资源。

浏览器中的缓存

1. cookie

由于http是无状态的,如果需要记录http的状态,就需要浏览器进行记录操作,客户端发送请求,服务器返回一个标识记录请求状态,客户端保存到cookie中。 相关的api:

get:document.cookie
set:document.cookie='key=value'

2. session

session是存储在服务端,不过也是基于cookie,然后再保存到服务器上

3. localStorage

浏览器的本地存储,可以存储的大小为2m 相关的api:

//get
localStorage.getItem('key')
//set
localStorage.setTtem('key','value')
//remove
localStorage.removeItem('key')
//clear all
localStorage.clear()