浏览器缓存

  缓存能改显著的改善网站的性能,时网站开发中很重要的一环。网页的缓存可以通过http协议的头部协议进行控制。本文我们提到的缓存不涉及缓存服务器,只讨论客户端和服务器交互时的缓存。缓存分为两类强制缓存协商缓存。在实际使用中两种方式可以同时使用。

强制缓存

  顾名思义,强制缓存意味着当客户端接收到该头部信息后必须在本地进行缓存,只有当不满足强制缓存的限制条件时才会去服务器端请求页面信息,否则直接读取本地缓存。强制缓存可以通过以下两种头部信息进行控制

Cache-Control: max-age=10

当服务器返回的数据带有该头部信息时是指在10秒内再次请求该页面时使用本地缓存。HTTP 1.1及以上版本可以使用该头部信息。

Expire: Sun, 25 Aug 2019 12:30:49 GMT

当服务器返回该头部信息时,浏览器在超出这个时间之前都会请求本地缓存。此处设置的时绝对时间。HTTP 1.0支持该头部信息。

当同时出现Cache-Control和Expire,且同时支持这两种头部信息时,浏览器会优先遵从Cache-Control的设置。

协商缓存

  当使用协商缓存时,浏览器会在发送的请求中带上相应的验证信息,当服务端接收到相关验证头部信息后会进行判断如果可以使用缓存则向客户端发送304状态码,浏览器请求本地缓存。否则返回最新的数据。

Last-Modified/If-Modified-Since

服务器返回的头部信息中带有Last-Modified时,浏览器会记住该信息的时间。当再次请求该页面时会在头部字段IF-Modified-Since中带入该头部信息的值发送到服务器端,如果和请求的文件的ctime匹配则返回304状态码,浏览器使用本地缓存。不匹配时服务器返回最新文件。这种方法只是通过时间进行判断,无法判断文件是否真的发生变化。

Etag/If-None-Match

Etag在验证方式上和Last-Modifed一样,唯一不同的是Etag的值是根据请求的文件内容生成的,每当文件的内容发生变化时相应的Etag值也发生变化。Etag可以通过md5方式生成,也可以使用其他方式生成。