格智教育教你如何利用浏览器缓存

每天叫醒你的不是闹钟，而是姿势

减少呈现页面时所必需的HTTP请求的数量是加速用户体验的最佳方式。可以通过最大化浏览器缓存组件的能力来实现。

四川格智

什么是缓存

如果组件(HTML、CSS、JavsScript、图片资源等)被缓存到浏览器中，在下次再次加载的时候有可能从组件中获取缓存，而不是向服务器发送HTTP请求。减少HTTP请求有利于前端性能优化。

浏览器如何缓存

浏览器在下载组件(HTML、CSS、JavsScript、图片资源等)，会将他们缓存到浏览器中。如果某个组件确实更新了，但是仍然在缓存中。这时候可以给组件添加版本号的方式（md5）避免读取缓存。

浏览器再次下载组件时，如何确认是缓存的组件

1.Expires头

可以通过服务端配置，将某个组件的过期时间设置的长一些。比如，公司Logo不会经常变化等。浏览器在下载组件时，会将其缓存。在后续页面的查看中，如果在指定时间内，表明组件是未过期的，则可以直接读取缓存，而不用走HTTP请求。如果在指定时间外，则表明组件是过期的，此时并不会马上发起一个HTTP请求，而是发起一个条件GET请求。

2.条件GET请求

如果缓存的组件过期了(或者用户reload，refresh了页面)，浏览器在重用它之前必须先检查它是否仍然有效。这称为一个条件GET请求。这个请求是浏览器必须发起的。如果响应头部的Last-Modified(最后修改时间，服务器传回的值)与请求头部的If-Modified-Since(最新修改时间)得值匹配，则会返回304响应(Not-Modified)，即直接从浏览器中读取缓存，而不是走HTTP请求。

3.Etag(实体标签)

Etag其实和条件GET请求很像，也是通过检测浏览器缓存中的组件与原始服务器上的组件是否匹配。如果响应头部的Etag与请求头部的If-None-Match的值互相匹配，则会返回304响应。

Etag存在的一些问题：

如果只有一台服务器，使用Etag没有什么问题。如果有多台服务器，从不同服务器下载相同的组件返回的Etag会不同，即使内容相同，也不会从缓存中读取，而是发起HTTP请求。

Etag降低了代理缓存的效率。

If-None-Match比If-Modified-Since拥有更高的优先级。即使条件GET请求的响应头部和请求头部的两个值相同，在拥有多台服务器的情况下，不是从缓存中读取，而是仍然会发起HTTP请求。

有两种方式可以解决这个问题

在服务端配置Etag。

在服务端移除Etag。移除Etag可以减少响应和后续HTTP请求头的大小。Last-Modified可以提供完全等价的信息