架构高性能网站秘笈(三)——浏览器缓存

什么是浏览器缓存？

在《架构高性能网站秘笈(二)——动态内容缓存》中我们知道，当不同用户请求相同数据时，动态内容缓存能够避免服务器的重复计算，从而降低用户的等待时间。但如果是同一个用户请求相同的数据，即使服务器能避免重复计算，但仍需将重复的数据传递给浏览器。若使用浏览器缓存，则同一个用户请求相同的数据时，浏览器只需从自己本地读取，无需从服务器上获取。从而大大降低用户的等待时间，减少了服务器的压力，可谓一箭双雕！

浏览器是如何处理缓存的？

是否启用浏览器缓存是通过HTTP协议控制的。
浏览器在接收服务器传来的页面后，会将页面存入本地缓存。如果响应头中包含了页面的过期时间，那么当用户请求相同的页面时，浏览器会询问服务器是否可以使用缓存页面，若服务器同意使用缓存，则返回304状态码；若服务器不同意，则将新的页面返回给浏览器，并携带200状态码。

此外，如果响应头中未包含启用浏览器缓存属性的话，浏览器仍然会缓存当前页，但下次请求相同页面时浏览器会直接向服务器请求新的页面，而不会询问是否使用缓存页面。

如何实现浏览器缓存？

1. last-modified

如果服务器向浏览器返回的响应头中包含last-modified属性，那么浏览器会将该属性与页面一起存入本地缓存。
当用户请求相同的页面时，浏览器发送的请求头中会携带属性：

<code class="language-shell hljs lasso has-numbering"><span class="hljs-keyword">If</span><span class="hljs-attribute">-Modified</span><span class="hljs-attribute">-Since</span>:XXXXX</code><ul style="ZOOM: 1" class="pre-numbering"><li>1</li></ul>

服务器会根据该值判断是否可以使用缓存页面，若可以使用缓存，则返回304状态码，若不可以使用缓存，则返回最新的页面，并携带200状态码。

注意：如果服务器的响应头中未包含last-modified属性，那么用户在请求相同页面时，浏览器中也不会包含If-Modified-Since:XXXXX属性，从而服务器也不会判断是否使用浏览器缓存，而是直接返回页面。

2. 采用ETag属性

ETag属性和Last-Modified属性类似。ETag属性值是一串字符串。
若服务器的响应头中包含了ETag属性，那么浏览器会将页面和ETage属性值一起缓存；当用户请求相同的页面时，浏览器会读区缓存的ETag值，并作为请求头的If-None-Match:”xxxxx”属性发送给服务器；服务器收到该属性后，判断是否允许浏览器使用缓存页面，若允许则返回304状态码，若不允许直接返回新的页面，并携带200状态码。

如何彻底实现浏览器缓存？

刚才的浏览器缓存还会涉及到浏览器与服务器的通信，因为浏览器需要向服务器询问是否使用本地缓存，而这些通信仍然需要消耗较多的用户等待时间。能否避免浏览器的这种询问呢？

1.采用Expires属性

Expires属性表示过期时间。
服务器只需在响应头中添加Expires属性，浏览器会将该属性与页面一起缓存。当用户再次请求相同的页面时，浏览器会将该页面的Expires与当前系统时间进行比较，判断是否过期；若尚未过期，则直接使用本地页面。

但是，如果用户的本地时间是错误的，那么Expires属性无法发挥它的作用，此时需要使用Cache-Control属性。

2.采用Cache-Control属性

Cache-Control:max-age=3600表示页面从当前时间开始3600秒后过期。从而能解决用户本地时间错误的问题。

浏览器缓存的优点

1. 浏览器缓存能够大大降低(甚至消除)服务器的网络IO，从而服务器能够租用更廉价的带宽。
2. 浏览器缓存能减少(甚至消除)服务器查询缓存的操作、数据库操作，从而减小服务器压力，提高并发数。