HTTP缓存

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的以来

2. Cookie和localStorage的区别

• http请求不会带着localStorage

3. 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呢？