浏览器的缓存机制

33次阅读

共计 1590 个字符，预计需要花费 4 分钟才能阅读完成。

浏览器的缓存机制

​ 在前端开发中，性能一直是一个非常重要的部分，其中一个非常重要的判断标准就是一个网页打开的速度，其中一个提高网页反应速度的非常重要的方式就是利用浏览器的缓存机制，良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度，减少请求的延迟，降低网络负荷。

通常浏览器缓存策略分为两种：强缓存和协商缓存

基本原理

  1. 浏览器在加载资源时，根据请求头的 Expires 和 cache-control 判断是否命中强缓存，如果命中则直接从缓存读取资源，不会向服务器发起请求。
  2. 如果强缓存没有命中，浏览器一定会向服务器发起请求，通过 last-modefied 和Etag 去判断资源是否命中协商缓存，如果命中代表资源没有更新，服务器会返回 304，读取缓存中的资源，如果没有命中，则代表资源有更新，服务器会返回 200，从服务器加载资源。

强缓存和协商缓存的异同

  • 同：如果两种缓存方式都未命中，则都需要从服务端加载资源
  • 异：强缓存命中不会向服务器发起请求，协商缓存需要向服务器发起请求

强缓存

强缓存通过Expires 和 Cache-Control 两种响应头实现。

1. Expires

Expires: Wed, 22 Oct 2018 08:41:00 GMT

Expires 出现于 HTTP / 1.0，表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期，需要再次请求。并且受限于本地时间，如果修改了本地事件，如果修改了本地时间，可能造成缓存失效。

2. Cache-Control

Cache-Control 出现于 HTTP / 1.1，优先级高于 Expires , 表示的是相对时间。

Cache-Control: max-age=315360000

协商缓存

协商缓存是利用的是 【Last-Modified，If-Modified-Since】 和【ETag、If-None-Match】来管理的。

1. Last-Modefied & If-Modified-Since

Last-Modefied代表服务器端文件的最后修改时间，当浏览器发起请求时，会向服务端发送 If-modefied-Since 报头，询问在 Last-Modefied 之后有没有被修改过。如果没有修改过，则返回 304 使用缓存，如果修改过，则向服务器请求资源，返回 200。

但是如果本地打开缓存文件，会导致 Last-Modefied 被修改，所以在 HTTP/1.1 中引入 Etag.

2. Etag & & If-None-Match

Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。当发送请求是 If-None-Match 会将上次的 Etag 发送给服务器进行判断是否有更新，如果有更新，则会请求新的资源。

ETag的优先级比 Last-Modified 更高

具体为什么要用ETag，主要出于下面几种情况考虑：

  • 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新 GET；
  • 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说 1s 内修改了 N 次)，If-Modified-Since 能检查到的粒度是 s 级的，这种修改无法判断(或者说 UNIX 记录 MTIME 只能精确到秒)；
  • 某些服务器不能精确的得到文件的最后修改时间。

如何选择合适的缓存策略

大致的顺序

  • Cache-Control —— 请求服务器之前
  • Expires —— 请求服务器之前
  • If-None-Match (Etag) —— 请求服务器
  • If-Modified-Since (Last-Modified) —— 请求服务器

协商缓存需要配合强缓存使用，如果不启用强缓存的话，协商缓存根本没有意义

大部分 web 服务器都默认开启协商缓存，而且是同时启用【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】

正文完
前端 缓存
发表至：无分类
2019-07-27
 0

浏览器的缓存机制

34次阅读

共计 1386 个字符，预计需要花费 4 分钟才能阅读完成。

缓存类型
缓存在宏观上可以分成两类：私有缓存和共享缓存。共享缓存就是那些能被各级代理缓存的缓存。私有缓存就是用户专享的，各级代理不能缓存的缓存。
微观上可以分下面几类：
浏览器缓存
缓存存在的意义就是当用户点击 back 按钮或是再次去访问某个页面的时候能够更快的响应。尤其是在多页应用的网站中，如果你在多个页面使用了一张相同的图片，那么缓存这张图片就变得特别的有用。浏览器先向代理服务器发起 Web 请求，再将请求转发到源服务器。其中浏览器缓存包括强缓存和协商缓存，下文有详细介绍。本文主要侧重点就是针对于浏览器缓存。
2.CDN 缓存 CDN 缓存一般是由网站管理员自己部署，为了让他们的网站更容易扩展并获得更好的性能。通常情况下，浏览器先向 CDN 网关发起 Web 请求，网关服务器后面对应着一台或多台负载均衡源服务器，会根据它们的负载请求，动态将请求转发到合适的源服务器上。从浏览器角度来看，整个 CDN 就是一个源服务器，从这个层面来说，浏览器和服务器之间的缓存机制，在这种架构下同样适用。
3. 代理服务器缓存 代理服务器是浏览器和源服务器之间的中间服务器，代理转发响应时，缓存代理会预先将资源的副本（缓存）保存到代理服务器上。当代理再次接收到对相同资源的请求时，就可以不从源服务器那里获取资源，而是将之前缓存的资源作为响应返回。
4. 数据库缓存 数据库缓存是指，当 web 应用的关系比较复杂，数据库中的表很多的时候，如果频繁进行数据库查询，很容易导致数据库不堪重荷。为了提供查询的性能，将查询后的数据放到内存中进行缓存，下次查询时，直接从内存缓存直接返回，提供响应效率。
5. 应用层缓存 应用层缓存是指我们在代码层面上做的缓存。通过代码逻辑，把曾经请求过的数据或资源等，缓存起来，再次需要数据时通过逻辑上的处理选择可用的缓存的数据。
浏览器缓存
浏览器缓存就是把一个已经请求过的 web 资源拷贝一份存储在浏览器中，当下次请求相同的资源时，浏览器会根据缓存机制决定直接使用副本响应访问请求还是再次向服务器发送请求。
优点
1. 减少了冗余的数据传输 2. 减少了服务器的负担，大大提升了网站的性能 3. 加快了客户端加载网页的速度
缓存位置
从缓存位置上来说分为四种，并且各自有优先级，当依次查找缓存且都没有命中的时候，才会去请求网络。
Service Worker
Memory Cache
Disk Cache
Push Cache
强缓存和协商缓存
两者的主要区别是使用本地缓存的时候，是否需要向服务器验证本地缓存是否依旧有效。
强缓存
浏览器在加载资源时，会先根据本地缓存资源的 header 中的信息判断是否命中强缓存，如果命中则直接使用缓存中的资源不会再向服务器发送请求。
协商缓存
当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务器根据 header 中的部分信息来判断是否命中缓存。如果命中，则返回 304，告诉浏览器资源未更新，可使用本地的缓存。
缓存优先级
禁用浏览器缓存
在 Network 中有个 Disable cache，钩上就可以了，钩上后浏览器会忽略掉文档过期验证和服务器再验证的过程，直接向服务器请求最新的资源。
用户行为影响

地址栏访问，链接跳转是正常用户行为，将会触发浏览器缓存机制；
F5 刷新，浏览器会设置 max-age=0，跳过强缓存判断，会进行协商缓存判断；
ctrl+F5 刷新，跳过强缓存和协商缓存，直接从服务器拉取资源。

正文完
缓存
发表至：无分类
2019-01-23
 0