HTTP缓存

胜天半子bibi酱
2,243 阅读8分钟

HTTP缓存

  • 重用已获取的资源能够有效的提升网站与应用的性能。Web 缓存能够减少延迟与网络阻塞，进而减少显示某个资源所用的时间。借助 HTTP 缓存，Web 站点变得更具有响应性。
  • 缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。当 web 缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载。这样带来的好处有：缓解服务器端压力，提升性能(获取资源的耗时更短了)。对于网站来说，缓存是达到高性能的重要组成部分。缓存需要合理配置，因为并不是所有资源都是永久不变的：重要的是对一个资源的缓存应截止到其下一次发生改变（即不能缓存过期的资源）。

需要缓存的情况

  • 一个检索请求的成功响应: 对于 GET请求，响应状态码为：200，则表示为成功。一个包含例如HTML文档，图片，或者文件的响应.
  • 不变的重定向: 响应状态码：301.
  • 错误响应: 响应状态码：404 的一个页面.
  • 不完全的响应: 响应状态码 206，只返回局部的信息.
  • 除了 GET 请求外，如果匹配到作为一个已被定义的cache键名的响应.

Cookie

  • Cookie（复数形态Cookies），中文名称为“小型文本文件”或“小甜饼”，指某些网站为了辨别用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
  • Cookie就像你第一次去夜店，保安(服务器)给了你一个手环,你的手环有效期是24h,你突然出去接了一个电话,原来是陈浩南叫你去砍人(干其他事),然后你忙完了,回来继续嗨,带着你的手环给保安(服务器)看了(读Cookie)就放你进去了,你的每次进出都要看你的手环,Cookie就是你的手环
  • Cookie总是保存在客户端中，按在客户端中的存储位置，可分为内存Cookie和硬盘Cookie。 内存Cookie由浏览器维护，保存在内存中，浏览器关闭后就消失了，其存在时间是短暂的。硬盘Cookie保存在硬盘里，是人为设置的，有一个过期时间，除非用户手工清理或到了过期时间，硬盘Cookie不会被删除，其存在时间是长期的。所以，按存在时间，可分为非持久Cookie和持久Cookie。

Cookie是什么

  • 服务器通过 Set-Cookie 头给客户端(浏览器)一串字符串
  • 浏览器得到Cookie之后,每次请求都带上Cookie
  • 服务器读取Cookie之后就知道用户的信息
  • Cookie的生命周期默认是你关掉浏览器就over,后端可以强行设置时间,+1s~~~ ，辣么内存Cookie就变成了硬盘Cookie
  • Cookie本质是http协议中的一项内容
  • Cookie大小在4k左右

Cookie的缺点

  • Cookie会被附加在每个HTTP请求中，所以无形中增加了流量。
  • 由于在HTTP请求中的Cookie是明文传递的，所以安全性成问题，除非用HTTPS。
  • Cookie的大小限制在4KB左右，对于复杂的存储需求来说是不够用的。
  • Cookie不安全,用户可以更改

Cookie在那里

C盘的一个秘密地点,Don't look for me.

session

session是什么

由于Cookie不安全呀,机智的程序员就想了一个方法,把一个随机的id和我们的数据一一对应存放起来,session是一个抽象的东西,是一个数据结构,Cookie保存在客户端,而session保存在服务器，session的生命周期默认为20min,也是可以更改的

session-Cookie具体步骤

  • 将 SessionID（随机数）通过 Cookie 发给客户端
  • 客户端访问服务器时，服务器读取 SessionID
  • 服务器有一块硬盘（哈希表）保存了所有 session
  • 通过 SessionID 我们可以得到对应用户的隐私信息，如 id、email
  • 这块硬盘（哈希表）就是服务器上的所有 session

不基于Cookie的session

把sessinID直接传给前端,用LocalStorage + 查询参数实现

常见面试题

  1. Cookie和session是什么关系
  • 一般来说,session是基于Cookie实现的,sessionId要存放在cookie中发送给客户端,Cookie是session的以来
  1. Cookie和localStorage的区别
  • http请求不会带着localStorage
  1. localStorage和sessionStorage区别
  • sessionStorage生命周期在用户关闭(会话结束)页面后就失效

localStorage

localStorage是什么

localStroage是html5提供的一个api,它的实质是存放在浏览器的一个哈希表{'key':'value'},

localStorage在那里

C盘的一个秘密地点,和硬盘Cookie一样

localStorage的api

不用解释直接都看得懂,这里介绍常见的几个写,读,删

localStorage.setItem('myCat', 'Tom');

var cat = localStorage.getItem("myCat");

localStorage.removeItem("myCat");

localStorage的特点

  • localStorage和HTTP无关，
  • HTTP请求不会带上localStorage
  • 域名相同才能读取localStorage(没有同源辣么严格)
  • 每个域名localStorage最大存储量为10M左右(每个浏览器不一样,自己测试好吧~)
  • 由于数据存在本地,生命周期为无限,不用考虑过期的问题.

localStorage常用场景

  • 记录不敏感的信息(用户名之类的，生日，不能记录密码)
  • 用来提示用户新的功能(弹出对话框)

sessionStorage

基本内容同localStorage，区别在于SessionStorage在用户关闭页面（会话结束）后就失效.

HTTP缓存

重复请求很大的文件很影响性能，于是有了很多优化的方案

Cache-Control

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

缓存静态资源

当一些静态的东西，比如js，css，图像，可以设置为静态缓存

Cache-Control:public, max-age=315360000    //10年

首页不能设置缓存，如果你设置了，那么用户的得不到最新的响应，不能获取到你的最新网页

更新缓存

如果我的js，css等需要更新了，而上面我设置了10年的缓存，那我该怎么办？
主要你改变了url，就会重新请求，所以你可以加上各种查询参数，改下URL就好

Expires

  • Expires是RFC 2616（HTTP/1.0）协议中和网页缓存相关字段。
  • Cache-Control是它的升级版，如果还有一个 设置了 "max-age" 或者 "s-max-age" 指令的Cache-Control响应头，那么 Expires 头就会被忽略。
  • Expires 头指定了一个日期/时间(格林威治时间)， 在这个日期/时间之后，HTTP响应被认为是过时的，这个时间是本地时间
  • 详见mdn

Etag

  • 一般把md5放在Etag响应头中，用来检测是否需要重新下载缓存等，如果Etag中的md5码相同，那么不用重新请求，比如让状态码变为304，减少服务器负担，用于性能优化
  • ETag HTTP响应头是资源的特定版本的标识符。这可以让缓存更高效，并节省带宽，因为如果内容没有改变，Web服务器不需要发送完整的响应。而如果内容发生了变化，使用ETag有助于防止资源的同时更新相互覆盖
  • 和缓存的区别，缓存是直接不请求，Etag呢，如果ETag: "<etag_value>"也就是md5的话，会请求，但是不下载

MD5

  • MD5消息摘要算法，一种被广泛使用的密码散列函数,不是加密算法
  • 用来检验文件是否一致

lastmodified

  • The Last-Modified 是一个响应首部，其中包含源头服务器认定的资源做出修改的日期及时间。 它通常被用作一个验证器来判断接收到的或者存储的资源是否彼此一致。由于精确度比 ETag 要低，所以这是一个备用机制
  • Last-Modified 响应头可以作为一种弱校验器。说它弱是因为它只能精确到一秒。如果响应头里含有这个信息，客户端可以在后续的请求中带上 If-Modified-Since 来验证缓存。
  • 和Etag的区别：Etag是用md5作为响应内容的特征值，而lastmodified是比较响应内容的修改时间
  • Etag比lastModified更加严谨，如果资源发生变化，Etag就会发生变化，就会把最新的资源给客户端返回去，而lastModified不识别s（秒）单位里的修改，所以如果资源在s（秒）单位里发生了修改，那lastModified也不会发生改变，这样如果只用了lastModified，客户端得到的资源就不是最新的；但是设定了Etag之后，每次客户端发出请求，服务端都会根据资源重新生成一个Etag，对性能有影响

所以为什么不用cache-control呢？

avatar
文章
阅读
粉丝