{
    "componentChunkName": "component---src-templates-article-article-detail-gen-js",
    "path": "/cache-prioritization",
    "result": {"data":{"strapiArticles":{"id":"Articles_424","title":"如何用缓存(Cache)进行前端性能优化？","description":"缓存是一种保存资源副本并在下次请求时直接使用该副本的技术，可减少等待时间和网络流量，显著提升网站性能。","content":"##### 一、缓存是什么？\n\n缓存是一种保存资源副本并在下次请求时直接使用该副本的技术，可减少等待时间和网络流量，显著提升网站性能。\n\n---\n\n###### 1、常见缓存\n\n- 私有缓存：只能用于单独用户，譬如浏览器缓存；\n\n- 共享缓存：能被多个用户使用，譬如代理服务器缓存；\n\n![http_cache_type](http://static.learn-anything.cn/http_cache_type.png)\n\n---\n\n###### 2、什么资源会被缓存？\n\n- 用 HTTP 协议 GET 方法请求的资源默认都会被缓存，譬如html文档、图片、文件等；\n- 服务器响应中，包含 Cache-Control 头的资源，根据具体指令确定是否要缓存。\n\n---\n\n###### 3、查看资源的缓存情况？\n\n- 用 chrome 打开网站；\n\n- 打开开发者工具（windows快捷键`Control+Shift+J`、Mac快捷键`Command+Option+J`）；\n\n- 下图中的 `disk cache`  和  `memory cache`  都是使用了缓存；\n- 不要勾选 `Disable cache`  ，勾选意味着禁用缓存功能。\n\n![查看资源是否使用缓存？](http://static.learn-anything.cn/查看资源是否使用缓存？.png)\n\n---\n\n###### 4、查看服务器对缓存的配置？\n\n下图列出服务器返回的资源，只需要点击其中一行，即可显示资源请求和响应的详细信息，图中 `Cache-Control`  就是服务器对此资源的缓存配置。\n\n![查看服务器对资源缓存的设置？](http://static.learn-anything.cn/查看服务器对资源缓存的设置？.png)\n\n---\n\n##### 二、缓存更新\n\n###### 1、触发缓存的验证请求\n\n资源被更新了，浏览器也必须重新获取资源，才能显示最新版本的网站。下面几种情况都会触发验证请求，如果资源更新了，服务器返回最新资源给客户端，否则客户端继续使用缓存显示页面。\n\n- 点击浏览器的刷新按钮，需要验证；\n- 当前时间 大于 响应头 Expires  的时间，需要验证；\n- 缓存再本地保存时长 超过  Cache-Control 中 max-age 、s-maxage 的时长，需要验证；\n- Cache-Control 被设置为 no-cache，需要验证；\n\n---\n\n###### 2、缓存验证的过程？\n\n缓存的本地时长超过 Cache-Control 中 max-age 设定的时长时，需要进行缓存验证，图中的验证结果是 304(Not Modified)，表示缓存没有改动，无需更新，可继续使用。\n\n![HTTPStaleness](http://static.learn-anything.cn/HTTP-Staleness.png)\n\n---\n\n###### 3、缓存验证请求中的头信息\n\n缓存的具体信息(资源id，修改时间等)都在请求头中，服务器对比下这些信息，即可知道缓存是否需要更新。常见的缓存验证的请求头组合：\n\n- ETag + If-Match；ETag + If-None-Match；\n\n  ETag 是资源的唯一标识，可以快速确定是否需要返回最新资源给请求方。\n\n- Last-Modified + If-Modified-Since；Last-Modified + If-Unmodified-Since；\n\n  这两种是根据时间来确定缓存是否需要更新，通常使用在没有 ETag 的情况。\n\n---\n\n##### 三、相关 `HTTP头` 说明\n\n###### 1、Cache-Control\n\nCache-Control  是 HTTP 协议的请求头和响应头，用于实现缓存功能。单个请求可包含多个指令，用逗号隔开，指令不区分大小写但建议小写。[详细用法，看这里！](https://learn-anything.cn/http-cache-control)\n\n---\n\n###### 2、Vary\n\nVary 是 HTTP 协议的其中一个响应头，代理服务器用它来判断是否存在共享缓存来响应客户，没有就向源服务器发新请求来响应用户。[详细用法，看这里！](https://learn-anything.cn/http-vary)\n\n---\n\n###### 3、其他相关头\n\n- ETag  ：资源的唯一标识符，用于确定缓存资源是否是最新的？\n\n- If-Match、If-None-Match  ：用作确定资源  `存在或不存在` ？；\n\n- Last-Modified  ：表示资源的最后修改时间；\n\n- If-Modified-Since、If-Unmodified-Since  ： 在给定时间之后，`有或没有` 修改过？\n\n- [以上这些属性的详细说明，看这里！](https://learn-anything.cn/http-headers)\n\n---\n\n##### 四、Nginx 怎么使用缓存？\n\nNginx 作为代理服务器，开启缓存功能，可以减轻源服务器的压力，提升整个网站的性能。[详情，看这里！](https://learn-anything.cn/nginx-cache)\n\n---\n\n##### 五、参考文档\n\n- [HTTP 缓存  -  MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching)\n\n- [HTTP Headers  -  用法说明！](https://learn-anything.cn/http-headers)\n\n\n\n","url":"https://learn-anything.cn/cache-prioritization","published_at":"2021-11-30T12:27:10.000Z","tags":[{"name":"http/https","slug":"http-https"},{"name":"Nginx","slug":"nginx"}]},"site":{"siteMetadata":{"title":"收集优质资源","author":"<EMAIL>","description":"追求极简语言，说明事物因果！","email":"<EMAIL>"}}},"pageContext":{"title":"如何用缓存(Cache)进行前端性能优化？","slug":"cache-prioritization"}},
    "staticQueryHashes": ["63159454"]}