1.第一次打开该网站后，如果再次刷新页面。会发现浏览器加载的众多资源中，有一部分 size有具体数值，然而还有一部分请求，比如图片、 css和 js等文件并没有显示文件大小，而是显示了 fromdis cache或者 frommemory cache字样。这就说明了，该资源直接从内存或者本地硬盘直接读取，而并没有请求服务器。
一部分请求使用了缓存，而有一部分缓存并没有使用缓存。浏览器如果想判断何时该做什么操作，就必须要有一个判定标准。这里就需要用到缓存协商。简单来说就是 Web浏览器和服务器之间协定一个法则，什么情况下请求资源，什么情况下不请求。
缓存协商方式和 Cookie、 User-Agent一样，通过浏览器 header进行传输。
缓存协商方式有3种：
- Last-Modified
- ETag
- Expires
但是，实际网站运行中， Web服务器（比如 Apache）会自动获取静态资源的最后修改时间，同时会自动在 HTTP头文件中添加 Last-Modified标签。
对于静态资源来说，浏览器不会缓存html页面的，所以你每次改完html的页面的时候，html都是改完立即生效的，不存在什么有缓存导致页面不对的问题。浏览器缓存的东西有图片，css和js。这些资源将在缓存失效前调用的时候调用浏览器的缓存内容。
包含了 Last-Modified标签的资源，在下次的请求中，浏览器会带着该时间。当服务器接收到请求后会核对该时间后，文件是否被修改，如果修改了就直接返回数据，没有修改就直接返回 304状态码，告知浏览器直接使用本地缓存。这样，一次数据传输流量就被免除了，速度稍有加快。
Last-Modified似乎已经做到了部分性能优化效果。但是，总是有些情况下不是很奏效。比如，一个用户修改了一个文件，后来用户觉得修改错误，于是又修改回去。
上面的过程中，文件内容并没有发生变化。但是，文件在系统中的物理最后修改时间却发生了变化。这种情况下，如果浏览器再次请求资源。服务器还是会发送完整数据。从而并未完全达到我们预想的效果。于是在此之上，我们还可以添加一个 ETag标签，用来进一步确认文件是否修改。
ETag的值不同于 Last-Modified，他并不会在文件被修改时候就发生变化，而是在文件内容发生变化的时候才会被改变。
如果，我们可以确定，一个文件在半年内不会改变，那么我们可以让浏览器在这半年时间内都不来服务器询问，而直接使用本地缓存。这里就需要使用第三种协商方式 Expires.
怎么让浏览器的缓存的东西不失效？
设置header中的Expires的值为系统支持的最大时间，如果expires的时间为-1，那么缓存会立即失效。如果是一个将来时间，那么它将在将来时间失效。
怎么让浏览器不缓存静态资源？
一种方式就是让你的页面有这样的header，Cache-Control: no-cache header，这样浏览器就不会缓存静态资源了，每次取数据的时候都去服务器上重新获取。
另外一种方式就是让你的静态资后缀加上一个版本号。
网友评论