缓存的简单分类
浏览器缓存可以简单的分为两类，一种是内存缓存，一种是硬盘缓存。
该文章没有代码，是对目前了解以及所用到的浏览器缓存的知识做一个梳理和总结。
内存缓存
内存缓存指的就是平时常用的SessionStroage，localStroage，还有页面js代码运行起来时可能存在的js对象等等，这些全都属于是内存缓存的范畴。内存缓存可以被开发者直接使用和访问，是比较可控的缓存。
当然，你可以在文件系统中找到其对应的位置，但找到的是浏览器内部的数据库。例如，edge的存储位置就是 C:\Users\用户名\AppData\Local\Microsoft\Edge\User Data\Default\Local Storage
小问题：
可能有些同学到这里就会有一个疑问：localStroage不是直接写入磁盘中的吗，这不是属于是硬盘缓存吗？
硬盘缓存
硬盘缓存指的是在HTTP请求中，利用强缓存、协商缓存等缓存策略存储下来的缓存，如图片资源，css文件等。主要指的是各种用于提升性能、减少网络请求的缓存。用户和开发者在正常情况下是没有办法去访问这些缓存的。相对于内存缓存来说是不可控的内存。
当然，这也可以在文件系统中找到对应的位置。例如，edge的存储位置就是C:\Users\用户名\AppData\Local\Microsoft\Edge\User Data\Default\Cache\Cache_Data
问题的解答：
了解完硬盘缓存是什么，就可以解决上面提出的问题了。localStroage是直接写入硬盘的，但是它的主要作用不是用来去提升网页在网络请求中的性能等。并且localStroage本身有5MB的存储限制，只能存储轻量的数据。没有办法去做到存储大量的请求数据，从而去实现减少网络请求的效果。
解决完这个问题，可能还有些同学会有疑问，如果我不用强缓存呢，那我是不是就没有硬盘缓存了？其实不是的，如果没有设置强缓存、协商缓存，浏览器其实还有一个自己的默认缓存。也就是说浏览器会自己判断，是不是要自己存储一些数据去提高性能。另外的，像是图片这些资源，其实浏览器是会自动缓存下来的。
硬盘缓存的自动清除
另外，硬盘缓存是浏览器自动存储的，当然自动存储对应的就是自动删除——浏览器会自动清除很久没用到的硬盘缓存。
这就可以解释：为什么频繁访问的网站，它的加载速度很快。但是隔一段时间之后，这个网站的加载速度就变慢了。
频繁访问的时候，浏览器从硬盘中拿到对应的首次加载资源，加载速度很快，但是隔一段时间之后，该资源被浏览器自动清除了，所以变慢了。
常见的缓存策略
1.HTTP缓存
HTTP缓存指的就是强缓存和协商缓存。通过对HTTP响应头和请求头的字段设置，达到缓存相关的HTTP请求资源，强缓存适合存储一些静态资源，即长时间不会变动的资源；协商缓存适合存储动态资源。
2.Web Stroage
Web Stroage主要指的就是SessionStroage和localStroage。可以存储一些轻量的用户设置或者用户状态等相关信息。
3.Service Workers
Service Workers可以拦截网络请求，决定使用缓存资源还是网络资源。这个的主要作用其实是离线功能。也就是可以让web应用在没有网络的情况下，仍然可以加载出来。
4.Content Delivery Network(CDN)
将资源分布在多个地理位置的服务器上，从而减少用户请求资源的延迟。可以简单的理解为，请求客户端距离目标服务端非常远。那么如果在中间设置一个中介，请求客户端可以在中介这里拿到目标服务端处理的数据。就可以极大的减少网络带宽的消耗和用户的等待时间。这个中介就是CDN服务器，类似于代理服务器。当然，CDN还可以做到更多的事情，这里只是简单的类比介绍一下。
5.文件名哈希/版本控制
浏览器会自动缓存相关资源，但是如果出现了重命名的情况，浏览器就会使用旧的缓存。此时就需要版本控制或者是文件名哈希，让浏览器可以缓存最新的数据。版本控制可以在文件名后加一个参数：image.jpg?v=1.0，或者是这样子放一个版本号：image-v2.jpg。文件名哈希也是相同的道理，通过对文件名做哈希，就不会出现重命名的情况。
6.懒加载
通过用户的需要，动态的加载资源，减少初始加载的时间。
写在最后
其实作者在学习浏览器缓存的过程也遇到很多问题，类似于为什么图片可以自动缓存，凭什么可以自动缓存，谁给它能自动缓存了，我这个开发者怎么不知道等等很多奇奇怪怪的问题。
希望可以帮到大家。当然，如果有错误，欢迎指正！
