http 缓存相关学习

在面试中被问到好多缓存的问题  200 cache cookies 304（304 和 200 cache的区别） cookies在什么时候创建  发送  等等  自己回答的并不是很好 这次仔细的学习一下 把学习的过程分享出来

缓存

  我们希望能在考虑数据的新鲜度的同时进可能快的对请求进行响应，这个时候我们就要考虑缓存   缓存主要分为以下的几种：

1. web缓存
2. HTTP缓存
3. 服务器缓存
4. 数据库缓存

缓存时机

• web缓存把字符串存储到客户端，可以在发送请求的时候通过缓存的数据与服务器交互(webStorage cookies)
• http缓存是客户端缓存，它把服务器的响应保存在客户端，可以通过一些字段的控制来更好的使用这种缓存机制（200 cache    304   expries等等）
• 服务器缓存的技术主要有Memcacheed和Redis 用来缓存处理过的服务器响应（可以为不同用户提供缓存，比如两个人请求相同的信息）
• 数据库缓存

用户请求从客户端到服务器,服务器在与数据库交互在这些过程中都可能使用到设置的缓存，来加快响应用户的请求

1）web存储 （cookies WebStorage）

之前自己的理解是webStorage和cookies是对立的，也就是webStorage是一种替代cookies的解决方案，这样的理解有一定的问题，其实webStorage是用来解决一些本不应该用cookies进行本地存储的一些场景，并且cookies作为http协议的一部分，在处理客户端和服务端通信是不可或缺的

1.1 cookies

  cookies是存储在客户端的一些文本，由服务端创建，伴随着用户请求在浏览器和服务端进行传递，供服务器读取，来获取用户的信息，维持会话状态。浏览器对cookies的大小有一定的限制并且cookies在客户端是明文保存的也存在一定的安全性问题

1.1.1  cookies服务器写入

　服务器进行写入cookies的操作后，在发送给客户端的响应头中会产生一个set-cookies的响应头，浏览器通过检测这些响应头来进行cookie的接收

1.1.2  cookies的客户端发送

浏览器将cookies放在请求头中，当你请求响应的url的时候会根据domin和path的对应去将响应的cookies发送给服务端

• path  cookies由用户访问的页面服务端写入，但并不是只有当前的页面才能访问到该页面的cookies  在当前页面的子页面也是可以访问到当前页面的cookies的   我么可以设置当前页面的cookies存在根目录下，这样相同域的请求都能访问到这个cookies了

        document.cookie = "name=ha;path=/"

• domain   在有关联的域名的前提下 可以通过设置cookies的domain来实现同域的使用

        document.cookie = "name=ha;domain=value" //这里的value值是你希望你的cookies被关联的域访问的域值  

1.1.3 cookies的状态

1. 临时性质的cookies，在浏览器关闭后失效
2. 设置了过期字段的cookies，在浏览器关闭后还可以使用，存储在客户端的计算机中

1.1.4 cookies的安全性

　　cookies是保存在客户端的计算机中，可以被读取和修改所以是不安全的，不能使用cookies保存重要的信息，并且在不进行设置的情况下cookies是明文传递的（同样也是明文存储的），这就更加的不安全了

1. 通过在发送cookies的时候设置secure字段 这样就能就能保证cookies通过https等安全的方式在客户端与服务器端进行发送
2. 本地的cookies仍然是明文保存，需要进行加密

1.2 webstorage

  webstorage提供了更加强大的存储功能，它能存储更大的数据量，这样就能让cookies专注的做它应该做的事情 webStorage提供两种形式的api

1. localStorage 存储在本地（但是不同浏览器之间是不能互相读取的）
2. sessionStorage 只在会话期间有效，在浏览器关闭后清除

2）http缓存

当服务器在响应中进行一些参数的设置的时候，浏览器就会缓存这些数据，当再次进行相同数据的访问的时候，浏览器可能会使用缓存的数据，这样就加快了访问的速度

这种时候存在两种模式

1. 不向服务器检查新鲜度，直接从缓存中读取（200 cache）
2. 向服务器检查新鲜度，如果是新鲜的则从缓存中读取，如果过期了，则从服务器中获取器中获取（304）

如何判断是否使用http缓存

  1）expires策略

在响应http请求的时候，在响应头中加入expires字段，告诉浏览器在过期时间之前可以直接从浏览器的缓存中读取数据而无需再次的发起请求（expires是http1.0 的  现在都是http1.1 所以可以忽略）

2）cache-control策略

cache-control的作用域expires相同，指明资源的有效期，当同时设置了expires和cache-control的时候，cache-control的优先级更大

2.1

　　max-age:服务器在响应请求的时候在cache-control中设置max-age的值，代表这段资源的过期时间

2.2

　　Last-Modified和If-Modified-Since

• 　　Last-Modified标志着这个响应资源的最后修改时间，服务器在响应请求的时候，通过这个字段告诉浏览器的该资源的最后修改时间
• If-Modified-Since 当资源过期过期（超出max-age）的时候，当再次请求该资源的时候，如果该资源有Last-Modified头，就会在请求的时候加上If-Modified-Since，服务器端在接收到请求的时候发现有If-Modified-Since字段的时候，会跟该资源的最后修改时间进行对比，如果服务器端的最后修改时间更新，证明该资源被修改过，则将整段资源返回，http 200，如果服务端的最后修改时间较旧，则表示没有修改过响应304 （此时不响应包体）

ETag和If-None-Match

• 　　ETag 服务器在响应请求的时候，将ETag作为该资源的唯一标识符发送给客户端
• If-None-Match 当资源过期的时候，再次请求该资源的时候，发现该资源具有ETag头，就会在请求是带上头If-None-Match，当服务器接收到具有If-None-Match头的请求的时候，就与该资源的字符串校验串进行对比来进行响应（200    304）

2.3 为什么会有ETag

• Last-Modified只能精确到秒级，导致它无法准确的标记修改时间
• 有些文件定期修改，但是内容没有变化，这个时候就无法使用这个缓存（Modified）
• 有时候无法准确的标记文件的修改时间，并且存在代理服务器时间不一致的状况

2.4  在判断缓存策略的时候，我们可以结合ETag和Last-Modified来实现更好的http缓存策略，先进行ETag的判断，在进行Last-Modified的判断

参考  http 200 cache  304  http://stackoverflow.com/questions/1665082/http-status-code-200-cache-vs-status-code-304

浏览器缓存机制  http://www.cnblogs.com/skynet/archive/2012/11/28/2792503.html

js操作cookies http://www.cnblogs.com/shoupifeng/archive/2011/11/25/2263892.html

细说cookies http://www.cnblogs.com/fish-li/archive/2011/07/03/2096903.html

html5 webstorage http://www.jb51.net/article/42287.htm

单页web应用 javascript从前端到后端