浏览器缓存及优化手段

#前言

当我们通过url首次访问某个网站的时候，我们如果使用浏览器的工具查看网络请求，会发现有很多http请求，但是当我们下一次再访问时，这些请求都不会发送而是展现在了页面上，而这就是浏览器缓存发挥的作用。

#浏览器缓存

浏览器缓存是指将页面长时间不更新的资源缓存到浏览器上，下次访问页面时该部分长时间不更新的资源直接从缓存中获取，从而减少了网络请求次数，提高了页面的加载速度。浏览器的缓存方式主要分为两种：强缓存和协商缓存，下面将为大家讲解这两种方式的区别。

#强缓存

强缓存的实现方式主要是通过在响应头中设置Cache-Control字段，该字段的值为 max-age=xxx表示缓存的有效期，单位为秒，如果到期的话那么就不会从缓存中读取会重新发送http请求获得数据。

这个方法虽然看起来很方便，但是还有几点是我们需要注意的：

• 通过浏览器url地址栏请求的资源，请求头中就会自动携带 Cache-Control: max-age=0字段，也就意味着这种资源无法被强缓存（这里无法被缓存指的是不会从缓存中拿，而是去问后端拿资源）
• 被缓存的资源在浏览器的Cache storage中，本质上还是在硬盘上
• 如果替换对应文件的内容，但是新文件的名字和旧文件的名字一模一样，这样获取的还是旧文件的缓存，并不会获取新文件的缓存。

#协商缓存

由于强缓存对浏览器地址栏访问的资源无效，所以浏览器提供了协商缓存的机制。

#last-modified 和 if-modified-since

通过上文我们知道了强缓存是通过时间来进行的，但是如果更改了文件内容但是名字没变这个强缓存就不能用了，last-modified这个方法可以很好的避免强缓存这一缺点。相信大家在写完代码的时候总会进行保存，防止自己更改的代码丢失，当我们对一个文件进行保存的时候，文件中的内容就会发生变化，其中就包含有文件最后一次修改的时间。

思路：根据文件最后一次修改的时间我们就可以确定文件是否被修改过，如果文件没有被修改过，我们就可以让浏览器去缓存中读取该文件，如果被修改了，那么我们就给后端发送http请求传回来新的文件。

根据这一特点，我们在第一次请求的时候在请求头中携带last-modified字段，里面的值为最后一次修改时间。当浏览器接收到响应头后，会在该资源再次被请求的时候，在请求头中携带if-modified-since 字段，值为last-modified的值，后端校验请求头中的if-modified-since 的值和 last-modified 的值是否一致，如果一致，则返回 304，浏览器会从缓存中获取资源。否则返回 200 状态码，浏览器就会重新请求该资源。

缺点：当文件内容被修改过但是最后内容还是和原来一样的话，last-modified的值会更新，从而导致资源重新被请求

#etag + if-none-match

这个方法和上述last-modified方法有异曲同工之妙，etag也叫文件指纹。世界上每个人的指纹基本上是独一无二的，而etag是属于文件自己的指纹，它会用自己的一种加密方式对文件内容进行加密，我们将加密过后的值返回给后端，这样在下一次请求后端的时候会自动携带if-none-match字段，后端会对前端传过来的这个字段与后端中储存的字段进行对比，如果一样就代表文件没有更改返回304状态码，否则返回200状态码。

缺点:这种方法比较耗费性能，如果文件资源较小可以使用

#tip

• 只要命中了强缓存就不会走协商缓存，只有强缓存到期才会走协商缓存

• 只用强缓存可以把除url地址栏访问的资源缓存起来，但是资源更新了就无法第一时间让前端获取到，所以还需要协商缓存

• 为了保证文件资源更新前端能及时获取到，一般会在文件名后面加上文件指纹（用内容生成的哈希值），这样文件指纹就会改变，从而保证文件资源的更新