Web性能优化-缓存与内容协商

1. HTTP 缓存

DNS 缓存

假设访问了百度,我们需要知道他的 ip 地址
首先浏览器会问 windows,如果不知道会问电信要,电信就会返回给浏览器,此时浏览器会缓存下来(一般是一天),然后在返回给浏览器,浏览器也会缓存下来(一般是几分钟)

HTTP 缓存

在响应头中加入:

Cache-Control: public, max-age=3600, must-revalidate 

Cache-Control

  1. public -- 公开内容,服务器和客户端之间的所有代理都能对文件缓存,与之相反 private,只有客户端能缓存
  2. max-age -- 缓存时间
  3. must-revalidate -- 必须重新校验(这个校验就叫做内容协商)

2. HTTP 内容协商

缓存过期以后还能重用吗?

ETag

在响应头中加入:

ETag: xxx // 比如文件的 MD5

当文件缓存失效的时候,客户端就会发起请求,这次就不是普通请求了,而是协商请求,要带上之前的 ETag
此时服务器会检查文件是否有变化,如果没有变化则返回 304 同时有一个空的响应,否则 200 和新文件的响应1
这样浏览器就知道要删除或者覆盖之前的缓存(而不是延用之前的),什么时候覆盖,什么时候删除呢?如果响应头里还有 Cache-Control 那就是覆盖,如果 Cache-Control=0 则是删除

VS .

-----------------------------------------------------------------------------------
|          | 缓存 (强缓存)                     | 内容缓存 (弱缓存)                  |
-----------------------------------------------------------------------------------
| HTTP/1.1 | Cache-Control: max-age=3600, ... | 请求头: If-None-Match: ABC         |
| HTTP/1.1 | ETag: ABC                        | 响应: 304 + 空 / 200 + 新内容      |
-----------------------------------------------------------------------------------
| HTTP/1.0 | Expire: 时间点A                  | 请求头: If-Modified-Since: 时间点 B |
| HTTP/1.0 | Last-Modified: 时间点B           | 响应: 304 + 空 / 200 + 新内容       |

3. 服务器禁用缓存

问:如果不加 Cache-Control,浏览器还会缓存吗?
答:会

Get 请求一般会被缓存,例如 200,203(非权威信息),206(部分内容),300(多种选择),301(永久重定向),400(已迁移)都会被浏览器缓存下来

就算我们不加 Cache-Control 也会被浏览器缓存下来,所以有些时候我们需要手动禁用缓存

Cache-Cintrol: max-age=0, must-revalidate
// 0 表示到达浏览器后就当场失效,
// must-revalidate 表示缓存失效以后可以用来协商

根据 MDN 说法,相当于如下写法

Cache-Cintrol: no-cache

最为严格的写法,在加上如下:

Cache-Cintrol: no-store // 表示不允许协商

4. 浏览器禁用缓存

  1. 加上随机数
  • /xxxx?random=xxx
  1. 在请求头中加入
  • xhr.setRequestHeader('Cache-Control', 'no-cache, no-store, max-age=0')

5. Pragma(过时)

是一个在 HTTP/1.0 中规定的通用首部,这个首部的效果依赖于不同的实现,所以在“请求-响应”链中可能会有不同的效果。它用来向后兼容只支持 HTTP/1.0 协议的缓存服务器,那时候 HTTP/1.1 协议中的 Cache-Control 还没有出来。

由于 Pragma 在 HTTP 响应中的行为没有确切规范,所以不能可靠替代 HTTP/1.1 中通用首部 Cache-Control,尽管在请求中,假如 Cache-Control 不存在的话,它的行为与 Cache-Control: no-cache 一致。建议只在需要兼容 HTTP/1.0 客户端的场合下应用 Pragma 首部。

Pragma: no-cache
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章