一、缓存

缓存技能一向一来在WEB技能体系中扮演十分重要人物，是快速且有用地提高性能的手法。

如上图，在网页展现出来的进程中，各个层面都能够进行缓存。

之前在学习缓存的进程p t ) a 5 r / .中，一向没有实践过，有些概念经常会忘记。
今日首要经过Node实践的办法学习浏览器缓存1 A 3，趁便剖析一下Koa处理缓存^ O n I的源码。

二、浏览器缓存

首要咱E D ` i f l *们看一下浏览器恳求缓存进程。

• 宣布恳求后，会先在本地查找缓存。

• 查到有缓存，要判别缓存是@ P 5 { C X a否新鲜（是否过期）。

• 没有过期，直接回来给客户端。

• 假如缓存过期了，就要再次去服务器恳求最新的资源，回来给客户端，并从头进行缓存。

三、新鲜度检测

可能许多同学看其他博客，说到都是“强缓存/洽谈缓存”等说法，这个我会放到后边讲。
上图中新鲜一词比较少见，来自《HTTP威b N `望攻略》。

因为HTTP会将资源缓存一段时刻，在这个时刻内，这个缓存便是“新鲜的”。
所以查看缓存是否过期就被称为，新鲜度检测。

那么接下来就经过Node来实战一下，看看：

1. 浏览器是怎么进行缓存的？
2. 怎么进行新鲜度检| x p E ?测？

四、Node实战

上述说到缓存一段时刻，那么HTTP供给了通用首部字= K ; p段（便是恳求报文和响应报文都能用上的字段），来操控缓存时刻。

1. Pragma/Expires介绍

Pragma 是J _ 2HTTP/1.0标准中界说的一个header特点，恳求中包括Pragma的效果跟在头信息中界说Cache-Control: no-cach{ z J 0 d w 5e相同，可是HTTP的响应头没有明确界说这个特点，所以它不能拿来彻底替代HTTP/1.1中界说的Cache-controlO K X J }头。通常界说Pragma以向后兼容基于HTTP/1.N c – 4 y # W .0的客户端。

Expires会回来一个绝对时刻，假如恳求时刻在Expires指定的时刻之前，就能射中缓存。可是因为客户端能够修正本地时刻，会和和服务器时刻不一致，容易呈现过失，不引荐运用。

2. Cache-Contrt u J k + 0 Hol介绍

Cache-Control是现在常见的缓存办法，上述字段许多，初学者能够只看max-age，避免混乱，也是最有含义的特点。

Cache-Control} & : p ! 9 R ) n描述的是一个相对时刻，在进行缓存射中的时分，都是运用客户端时刻进行判别，所以相比较Expires，Cache-Control的缓存管理更有用，安全一@ { 4 R c n | v些。

3. Cache-Control实战

经过KC F e @ boa框架，简略搭建一个Node服务。并经过koa-static管理静态资源。

代码结构参阅如下，maxage缓存设置10秒。

启动服务，就能够看到自己的页面了~

node index.js // server it N Ys starting at port 8001

在代码截图上，能够看到给koa-stf : O 8 ` v 3 } 9atic传了maxage: 10 * 1000。

koa-static源码中引入了koa-ss n l - d # Y V wend库。截取部分koa-send源码，只需传入maxage，就会设置Cache-Control的max-age。为符合前端开发者习气传入为毫秒，实际上是用秒为单位的。

经过NetWork能t a R D – $ 5够观察到现已成功设置Cache-Control: max-age=10

访问测验如下Q h 0 6 P 0 r图：

1. 在10s内再次恳求，能够看到js/ k ucss均来自缓存memory cache。

2. 10s后缓存过期，不走X _ e ~ – c 1 f +缓存，便再次从服务器获取。

4. HTML为何如此特别？

4.1 现象

经过| 0 R ` U w上面的试验能够看出，在Js/Css都走本地s q @ ^ –缓存的时分，HTML是仍旧从服务端获取的。

查看恳求信息之后，发现恳求头| 6 I p + G I中默许加上了Cache-Control: max-age=0。

经过测验，发现假如单独恳求Js资源，也会呈= I n现此类现象。因而得出结论，这个是浏览器` + K默许加的，应该是为了保证直接恳求的资源最i K [ ^ N k *新。

4.2 原因

针对request恳求，假如有Cache-Control约束，那么缓存体系就会先校验Cache-Control。不G ; i ^ @ y Q符合规则就直接恳求服务端，详细规则如下：

上述来自《HTTP威望攻略》。
同理浏览器中Network中的disable-cache也是如此，宣布恳求时，表l F E – 8 g示不需要走缓存，一定要服务端最新的。

5. 服务端再验证（新鲜度检测）

上述无论是http1.0仍是1.1的方案，都是在本地缓存中寄存一段时刻。过期后就需要去服务端从头恳求一遍。这个也被称之为强缓存。

可是，缓存中过期并不意味服务端资源改动。

因而恳求发现本地缓存过期，能够去服务端咨询一下，这个资源还新鲜吗？还能够持续运用吗？常见的办法便是带着字段If-MR ? r y ^ (odified-Since和If-None-Match。假如验证资源是新鲜的，没有改动。那只需要回来一个标识，也便是咱们常说的304，不需要回来数据，加快恳求时刻。

这个进程便是新鲜度检测b g y 4 : h = U，那完成? K 9 w y这个缓存的办法便是咱们常说的洽X * N R a % M谈缓存。

下面看下Node实战洽谈缓存。

6. LastV j S-Modified 和 IfP S x ( _-Modified-Since

带着If-Modified-Since的条件是，缓存中存储了Last-MoX F W u ] N A Bdified字段。
每个恳求回来时，response中能够带着字段Last-Modified，是服务端资源修正的最后日期。

下次建议恳求时带着If-Modified-Since便是缓v ; o / = a ` 5 O存中的Last-Modified，和服务端资源最后修正时刻进行比较，就知道资源是否新鲜了。

6.1 代码验证

每个恳求回来时，response中能够带着字段Last-Modified，d ` ] ; j是因为咱们运用的koa-static会默许给咱们的回来头加上Last-Modified。

宣布的恳C L Z l Z | | h %求也会主动带着If-Modifiea S u = , D 3 nd-Since。

可是验证发现，10s后缓存过期，再次宣布恳求并没有回来304，仍是200。

原因是需要装备中间件koa-conditional-get。

6.2 koa-conditional-get

简略看下koa-c0 m v m z Honditional-get做了什么，让洽谈缓存生效。
能够看出源码十分简略，判别是否新鲜即可。

ctx.fresh怎么核算，会在& h ? k后边讲。但很明显是校验: ( 7 C了If-Modified-Since和LasE ~ a Mt-Modified。

6.3 Last-Modified测验

1. 在 0 L p = f10s内恳求
2. 10s& z `过期后恳求
   

   

测验成果，10s内Js/Css走强缓存。HTML因为恳求默许加F 4 [ / _ r | . Jmax-age为0，^ ; C _走洽谈缓存回来304_ i Y I d & A 9 }，不需要回来数据，Size由484B降至163n . ? X iB。

10s后Js/Css缓存到期，悉数走洽谈缓存，因为Last-Modified一向没有改动，均回来304，不需要回来数据@ r ? ?，Size降至163B。
回来304后，会重置max-age，10s内恳求无需恳k N v } ( R t求服务器，依然是强缓存。

3. 修正Js内容

修正Js内容测验成果，Css没有修正仍旧回来304。Js修正导致Last-Modified大于恳求中的If-Modified-Since，资源不够新鲜，回来200并回来最新数据。

6.4 总结

Last-Modified工作流程如下：

一般来说，在没有调整服务Y 5 V 2器时刻和篡改客户端缓存的情况下，这两个header配合e R ^ 5 w a起来管理洽谈缓存是十分可 a S E ! X靠的，可是有时分也会服务器上资源其实有改变，可是最后修正时刻却没有改变的情况，而这种问题又很不容J ` E D 9 L y p易被定位出来，而当这种情况呈现的时分，就会影响洽谈缓存的可靠性。所以就有了另外一对header来管理洽谈缓存，这对header便是【ETU & O A dag、If-None-Match】

7. ETag 和 Ifq Q ~ #-None-Match

7.1 ETag

这个header是服务器根据当前恳求的资源生成的一个仅有标识，这个仅M { T : Q P有标识是一个字符串，只需资源有改变这* F A p j ^ ^ h个串就不同，所以能很好的补充Last-Modified的问题。
避免干M . A F i R R h j扰，能够注释1 $ B vLast-modified逻辑。

ETag的验证也十分简略，只需要再参加一个中间件koa-etag，重启服务测验。

7.2 ETag实践

宣布恳求，responseC + ; A ,已有Etag：

下一次恳求也会 t * c O Z W带着If-None-Match为缓存中的Etagd k l e z w ] N n值：

修正Js资源测验，成果如下：

修正Js资源测验后，导致EtN / & K : ~ J cag改动。服务端再验证资源不新鲜，Js资源从头获取，回来200。

Css没有修正，Etag没变回来304。

Etag整体流程和Last-( h 9 c o LMod. a cified保持一致。

7.3 koaY $ P 0 j G-etag源码解析

koa的etagS 9 ) ~ 生成首要2个办法[ @ C ) 1，详细的能够直接去看源码K k 8。

（1）根据f I M 4 p文v } E u件的修正时刻和文件巨细生成

function stattag (stat) {
var mtime = stat.mtime.getTime().toString(16)
var size = stat.size.toString(16)5 ( u 3
return# / T q E , ,  h '"' + size + '-' + mtime + '"'
}

（2）运用crypto库加密生成

function entitytag (entity) {
if (entiX c m v = Fty.length === 0) {
// fast-path empty
retO # i e vurn '"0-2jmj7l5rSw0yVb/vlWAe ? j % m `YkK/YBV L ^ [wk"'
}& R ( E
// compute hash of entity
var hash = crypto
.createHash('sha1')
.update(entity, 'utf8')
.digest('ba# e $ ase64')
.H w o  g e asubstring(0, 27)
// compute length of entity
var len = typeof entity === 'string'
? Buffer.byteLe- l C 8ngth(entity, 'utf8X + + j / K `')
: entity.length
return '"' + len.toString(16) + '-' + hash + '"y 1 l s w m W _'
}

五、新鲜度检测（Koa源码解读）

1. koa-conditional-get

在前6 Q ` h面看到koa-conditional-get能够让洽谈缓存生效，原因是对资源新鲜度做了304回来的处理。

那么重点来看下ctx.fresh是怎么处理的？

2. koa

能够看到Koa在request中的fresh办法如下： : 3 M Y k w

状况码27 | & ( j T00-300之间以及304调用fresh办法，判别该恳求的资源是否新鲜。

3. fresh办法源码解读

只保留中心代码，能够自行去看fresh的源码。

var CACHE_CONTROL_NO_ 4 z X F R tCAb Q # W t S a ~CHE_REGEXP = /(?:^|,)s*?no-cj $ ; 8 p 4ad 8 i N A U tches*?(?:,|$)/
function fresh (reqHe6 c J Caders, ra f a | j 3esHeaders) {
// 1. 假如这2个字段，4 c | f (一个都没有，不需要校验
var modifiedSince = reqHeaders['if-modified-since']
var noneMatch = reqHeaders['if-none-match']
if (!modiS ! 2fiedSincej F - I t n b  &aJ 8 E q 1 Ump;& !noneMatch) {
console.log('not fresh')
return false
}
// 2. 给端对端测验用的，r h g o g { y K &因为浏览器的Cache-Control: no-cache恳求
//    是不会带if条件的 不会走到这个逻辑
var cacheControl = reqHeaders['cache-control']
if (cacheControl && CACHE_m Z + . X X 6 NCON= ( w T G E hTROL_NO_CACHE_REGEXP.test(cacheControl)) {
return false
}
// 3. 比较 etag和if-none-match
if (noneMatch && noneMatch !==  L T R'*') {
var etag = resHeaders['etag']
if (!etag) {
return false
}
// 部分代码
if (match === etag) {
return true;
}
}
// 4.E I ; L * r N 比较if-modified-since和last-mj 2 y : ]odified
if (modifiedSince) {
var lastModified = resHeadO [ Eers['last-modified']
var modifiedStale = !lastModified || !(parS ) . 2seHttpDate(lastModified) <= parseHttpDate(modifiedSince))
if (modifiedStale) {
retr L R e _ |urn fap ? [ x k ; 8 slse
}
}
returnR I A 0 , true
}

fresh的代码判别逻辑总结如下，满足? d 1 9 c3种条件之一，fresh为true。

六、总结

浏览器缓存整体流程如下：

1. 宣布恳求后，会先在本地查找缓存。
2. 没有缓存去服务端恳求最新的资源，回来给客户端（200），并从头进行缓存。
3. 查到有缓存，要判别缓存本地是否过期(max-l c 6 ^ page等)。
4. 没有过期，直接回来给客户端（200 from cache）。
5. 假如缓存过期了，看是否有装备洽谈缓存（etag/last-modified），去服务端再验证该资源是否更新，本地缓存是否能够持续运用| y x 3 h x 3 r 。
6. 假如发现资源可用，回来304，奉告客户端能够持续运用缓存，并根据max-age等更新缓存时刻。不需要回来数据，加快恳求时刻。
7. 假如服务端再验证失败，恳求最新的资源，回来给客户端（200），并从头进行缓存。

咱们常说的强缓存，其实便是直接在本地缓存获取，也便是Cache-Control: max-age等装备，不需要和服务端沟通} n =。

而洽谈缓存是在强缓存的基础上，装备T / ]etag或last-modified等参数) 3 x * h P j ~。本地缓存失效后，去服务端进行新鲜度检测。能够避u A 9 ; ] 2 l K免每次本地缓存过期后都回来最新的数据，造成恳求缓慢。

七、q k g参阅资料

• 前端Z S [ b 4 2 g优化：浏览器缓存技能介绍
• 浏览器缓存
• 书本《HTTP威望攻略》

本文的源y : D f i 4 M 码剖析环绕koa，不代表其他服务t * g b $框y 4 q M J v 架。对这块知识不了解建议实践一下。z N T B写错的当地，接受批评指正~