服务器缓存实现过程的详细说明

原文:

在前端开发中，性能一直是每个人都重视的. 但是，判断网站性能的最直观方法是查看网页打开的速度. 提高Web响应速度的一种方法是使用缓存. 出色的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于可以重用缓存的文件，因此还可以减少带宽并减少网络负载. 因此，让我们看一下服务器端缓存的原理.

缓存分类

Web缓存的类型很多，例如缓存，代理服务器缓存，我们熟悉的CDN缓存和浏览器缓存. 我实际上拒绝阅读过多的文本，因此我画了一张图来解释它.

浏览器通过代理服务器向源服务器发起请求的原理如下图所示，

浏览器向代理服务器发起Web请求，然后将请求转发到原始服务器. 它是一个共享缓存，因此其缓存资源可在许多地方使用，因此对节省流量有很大的作用.

浏览器缓存是在客户端上保存文件. 在同一会话中，它将检查缓存的副本是否足够新. 返回网页时，可以从浏览器缓存中使用访问的资源. 通过减少服务器处理的请求数量，用户将获得更快的体验

接下来，我将重点介绍传奇的浏览器缓存.

浏览器缓存

页面的缓存状态由标题确定. 有四个标头参数:

一个，缓存控制:

1，max-age（单位: s）指定设置缓存的最大有效时间，该时间定义了时间长度. 浏览器向服务器发送请求后，在最大使用期限内浏览器将不再向服务器发送请求.

让我们找到资源并看看. 例如，上面的css资源max-age = 2592000，这意味着缓存有效期为2592000秒（即30天）. 因此，即使服务器上的资源发生更改，此版本的资源也将在30天内使用，并且不会通知浏览器. max-age将覆盖Expires，稍后将对此进行讨论.

2，s-maxage（单位: s）与max-age相同，仅用于共享缓存（例如CDN缓存）.

例如，当s-maxage = 60时，在这60秒钟内，即使CDN的内容已更新，浏览器也不会发出请求. 也就是说，max-age用于常规缓存，而s-maxage用于代理缓存. 如果存在s-maxage，则max-age和Expires标头将被覆盖.

3，public指定响应将被缓存并在多个用户之间共享. 这就是下图的含义. 如果未指定public或private，则默认值为public.

4. 专用响应仅用作专用缓存（请参见下图），并且不能在用户之间共享. 如果需要HTTP身份验证，则响应将自动设置为私有.

5，no-cache指定未缓存响应，例如表示未缓存资源，

但是，设置no-cache并不意味着浏览器不缓存，而是在缓存之前向服务器确认资源是否已更改. 因此，有时仅设置no-cache来阻止缓存是不够的. 您还可以添加一个私有命令，以将过期时间设置为过去的时间.

6. 无存储绝对禁止缓存. 乍一看，您知道如果使用此命令，当然，它不会被缓存〜每次请求资源时，都必须从服务器中检索它.

7. 必须重新验证指定，如果页面已过期，请转到服务器以获取页面. 该指令不常用，因此我不会过多讨论.

两个，过期

缓存过期时间，用于指定资源过期的时间，它是服务器端的特定时间点. 换句话说，Expires = max-age + request time，需要与Last-modified一起使用. 但是如上所述，高速缓存控制具有更高的优先级. 过期是Web服务器响应消息的标头字段. 当响应http请求时，它告诉浏览器，浏览器可以在到期之前直接从浏览器缓存中获取数据，而无需再次请求.

最后修改的三个

服务器端文件的最后修改时间需要与缓存控制一起使用，这是一种检查服务器端资源是否更新的方法. 当浏览器再次发出请求时，它将向服务器发送If-Modified-Since标头，询问在Last-Modified时间点之后资源是否已被修改. 如果没有修改，则返回码为304，并使用高速缓存；如果对其进行了修改，则服务器将再次请求资源. 返回码与第一个请求相同，资源是服务器的最新资源.

如下所示，最后修改时间是2014年12月19日（星期五）2:50:47

四个，ETag

根据实体内容生成哈希字符串，以标识服务器生成的资源状态. 浏览器会将这个字符串发送回服务器，以验证资源是否已被修改. 如果尚未修改，则过程如下:

使用ETag可以解决上次修改的问题:

a. 有些服务器无法准确获取资源的最后修改时间，因此无法判断资源是否在最后修改时间之前被更新

b. 如果对资源进行了非常频繁的修改，请在不到一秒钟的时间内对其进行修改，而上次修改的时间只能精确到第二秒

c. 某些资源的最后修改时间已更改，但内容未更改. 如果使用ETag，则认为该资源尚未修改.

使用缓存过程

仍然讲图片，以下是我对从浏览器请求到显示资源的过程的总结:

使用缓存控制指令

谈到这么多的缓存控制指令，您如何选择要使用的指令？我还是不说话==

额外

除了开头提到的许多缓存方法外，还有我们大家都熟悉的缓存方法，LocalStorage和sessionStorage（似乎是两个23333）.

LocalStorage是用于本地存储的公共资源. 域名下的许多应用程序共享此资源存在风险； LocalStorage除以页面域名. 如果存在多个不与LocalStorage通信的等效域名，则将导致“缓存多个副本”被浪费.

LocalStorage在PC上的兼容性不是很好，并且当网络速度快且协商缓存响应速度快时，使用localStorage的速度不如304快. 而且不能缓存css文件. 由于互联网速度较慢，移动终端使用localStorage的速度比304快.

以html格式加载png图像，第一次加载的时间如下所示，

但是，将图片存储在LocalStorage中之后，再次刷新后的加载时间为0.

与LocalStorage相比，SessionStorage的数据仅存储在特定的会话中，而不是持久性存储，因此关闭浏览器将清除数据. 它具有与本地存储相同的方法.

缓存是前端开发中必不可少的，因此我们需要仔细考虑哪种缓存方法可以更有效地使用并使我们的项目性能更好.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-305610-1.html