web页面性能优化系列（4）缓存优化

川长思鸟来 2022-03-16 07:42 327阅读 0赞

自动化缓存策略-处理大规模缓存的方案

http-Header（协议头部）:基于http-Request（请求头部）和http-Response（响应头）来实现的缓存策略

**缓存策略（一）cache-control**

属性：

`max-age:`指定缓存的有效时间  
`s-maxage:`只能指定Public类型的缓存，优先级高于max-age  
`private:`私有缓存，如果个人计算机上的缓存  
`public:`公开缓存，如cdn服务器上的资源缓存，因为共很多用户使用所以是public  
`no-cache:`请求获取当前服务器端该文件的`Last-Modified`对比判断`是否使用继续使用`本地缓存文件  
no-store:完全不使用缓存  
expires:指定资源到期时间，指服务端具体时间点，过期之前均从浏览器缓存读取数据  
从serviceWorker中读取资源

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70]

从内存中读取缓存资源

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 1]

从硬盘中读取缓存资源

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 2]

**缓存策略（二）客户端和服务端缓存协商**

方案一

服务器响应头`Last-modified`和请求头`if-modified-since`(请求头发送上次获得的该文件最后更新时间如果服务端上该文件最后修改时间发生了变化，那么返回状态码是200：请求成功，如果该文件最后修改时间没变，则返回304)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 3]

注意：

**last-modified缺点：**  
1、某些服务端不能获取精确修改时间  
2、修改时间变化但是文件内容并没有变  
3、以秒为单位的判断间隔不精确

方案二

弥补以上不足的方案：Etag/If-None-Match  
`特点：`通过当前文件内容的hash值进行判断，如果没有变化则返回304如果服务端文件有变化则200  
`优点：`通过文件内容的hash进行判断是否变更，非常精确  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 4]  
**分级缓存策略**

1、200状态（from cache）

由expires/cache-control控制，其中expires（http1.0有效）是绝对时间  
cache-control：max-age，s-maxage（http1.1）相对时间，两者都存在时cache-control优先级高，只要缓存没过期，部分缓存资源浏览器访问自己的缓存资源读取

2、304状态

这一层由last-modified/etag控制，当`第1步`失效或用户点击刷新或者按F5时，浏览器就会发送请求给服务器，如果服务器没有变化则返回`304`，如果发现了变化拉去最新资源返回`200`

3、200

当浏览器没有缓存或者`第2步`失效或者用户选择ctrl+f5时，浏览器直接拉取数据

示意图

**首次加载**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 5]  
非首次加载  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 6]

**缓存实战:**

*  1、新建文件config.js
 *  2、新建文件mime.js
 *  3、新建文件service.js
 *  4、新建文件夹并放入模拟请求的静态资源
 *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 7]

**config：**

exports.Expires = {
        fileMatch: /^(gif|png|jpg|js|css)$/ig,            //指定缓存文件类型
        maxAge: 60 * 60 * 24 * 365                        //过期时间
    }

**mime：**

exports.types={
      "jpg":"image/jpeg",
      "json":"application/json"
    }                                          //设置contentType

**service：**

**过期时间示意图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 8]  
**304请求资源版本校验**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 9]  
使用本地缓存资源时的请求消耗资源大小  
![在这里插入图片描述][20190311235023716.png]

# 欢迎加微信一起学习：13671593005 #

未完待续…gzip的使用…

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70]: /images/20220316/e9c251668477445bb8f69710587c17e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 1]: /images/20220316/3e982159d9d64f32a3cd27855cbbb702.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 2]: /images/20220316/01bc912e60784ac898ce7ca354acb356.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 3]: /images/20220316/e5bfe4dd70c64eb2b3cb172e92b5e50e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 4]: /images/20220316/2ab380b442c646ed9c93f147ef86c0f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 5]: /images/20220316/b3991b8d802d4b28a04adc0664b219b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 6]: /images/20220316/a387fde7a0414fc0aedc5f235d7d9df0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 7]: /images/20220316/9ddb24d09f2048eb9a94bc11967d8534.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 8]: /images/20220316/98418e62c4c84097a2f85add76c495f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTYwNzQy_size_16_color_FFFFFF_t_70 9]: /images/20220316/0d4da942ceba4274a65aacb9e0038177.png
[20190311235023716.png]: /images/20220316/6f441747a6a54a008a4efa9fc8433070.png