饥人谷技术博客前端本地存储前端修仙之路

浏览器缓存控制详解(cookie、session、localSt

2018-08-22  本文已影响52人  EnochQin

摘要:本文将会详细的介绍浏览器实现缓存控制的相关知识,包括cookie、session、localStorage、Cache-Control、Expires、ETag、Last-Modified等概念。

注:在看本文之前建议可以先看一下网页中的登录注册功能是如何实现的,对前端和后端的数据交互有个大概的了解。

1、cookie是什么 && cookie能干什么

Cookie(复数形态Cookies),中文名称为“小型文本文件”或“小甜饼”。指某些网站为了辨别用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。 ——摘自维基。

2、使用session保存信息

3、localStorage是什么 && localStorage 怎么用

localStorage 是HTML5 技术提供的api ,是window对象下的一个方法(window.localStorage)。

localStorage 的实质是一个存储在计算机本地的哈希表

4、关于上面的概念需要注意的事情

5、HTTP缓存 && Cache-Control 缓存控制

需要提一句的是:缓存控制其实也是前端性能优化的一部分,所以这一点其实很值得关注。

缓存控制的使用场景:一些网站需要加载的资源很多,导致每次刷新页面速度都非常都慢,那么该如何加快请求速度,缓存控制就应运而生。

Cache-Control 通用消息头被用于在http 请求和响应中通过指定指令来实现缓存机制。缓存指令是单向的, 这意味着在请求设置的指令,在响应中不一定包含相同的指令。

最常用的响应指令:Cache-Control: max-age=<seconds>

6、Expires 是什么 && 有什么不好的地方

7、ETag 是什么 && MD5 是什么

首先,Etag 是用来给文件一个版本号的。

那么我们先来了解一下MD5 。MD5是一个消息摘要算法。MD5 的常见使用场景:你在网上下载一个很大的文件,下载过程中你怎么知道自己下载的对不对呢?所以MD5 就是为了这种情景而生的。即网上的文件除了有资源本身外,还会有一个MD5值,然后你下载到本地后的文件也可以算出一个MD5 值,然后二者对比,如果完全相同则说明下的文件是正确的。

Etag 的使用场景:

  1. 后端算出资源的MD5值,将其设置到响应头的Etag里,如:
    Etag:"33a64df551425fcc55e4d42a148795d9f25f89d4"
  2. 然后下一次请求时,里面这个资源的请求头就多了一个值:
    If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"
  3. 后端就有如下设置:
    如果请求头的If-None-Match中的值和资源的MD5一样,说明资源是最新的,不需要下载,即可以返回304状态码( Not Modified),然后在此分支下就不用设置响应体了。
  4. 如果MD5的值不一样,说明你的资源需要更新,此时再返回最新的资源作为响应体。

Etag 与 Cache-Control 的区别

8、Last-Modified 是什么 && 使用过程是怎么样的

Last-Modified 是一个响应首部,其中包含源头服务器认定的资源做出修改的日期及时间。 它通常被用作一个验证器来判断接收到的或者存储的资源是否彼此一致。由于精确度比 ETag 要低,所以这是一个备用机制。包含有 If-Modified-SinceIf-Unmodified-Since首部的条件请求会使用这个字段。

使用过程:

  1. 在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个Last-Modified的属性标记在响应头里,此文件在服务期端最后被修改的时间,格式类似这样:
    Last-Modified:Tue, 24 Feb 2009 08:01:04 GMT
  2. 客户端第二次请求此URL时,根据HTTP协议的规定,浏览器会向服务器传送If-Modified-Since请求头,询问该时间之后文件是否有被修改过:
    If-Modified-Since:Tue, 24 Feb 2009 08:01:04 GMT
  3. 如果服务器端的资源没有变化,则自动返回HTTP 304(NotChanged.)状态码,内容为空,这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时,则重新发出资源,返回和第一次请求时类似。从而保证不向客户端重复发出资源,也保证当服务器有变化时,客户端能够得到最新的资源。

(END)

上一篇 下一篇

猜你喜欢

热点阅读