缓存
# 1. 讲讲浏览器缓存
查看答案
浏览器缓存的分类：
- 从缓存位置区分：硬盘缓存和内存缓存
- 从缓存策略区分：强缓存和协商缓存
浏览器缓存检查的过程是： 先检查强缓存，如果有强缓存且缓存时间未过期就走强缓存（200），如果没有强缓存或者强缓存时间过期就向服务端发送请求走协商缓存，如果协商缓存有且未过期就读取缓存（304），如果过期就请求数据（200）
- 第一次打开网页：资源文件会缓存在内存里，也会在硬盘中保存一份
- F5进行刷新：跳过强缓存，仍然走协商缓存，缓存资源未过期，优先从内存中读缓存，没有再走硬盘缓存
- 关闭页面之后，再次打开：如果没国企，会先从硬盘中加载再缓存到内存中
- Ctrl+F5进行刷新：浏览器不走强缓存和协商缓存，直接从服务器返回新数据和200
# 强缓存：
强缓存是不走HTTP请求的，在响应头中HTTP1.0用的是Expires，设置的是过期时间戳，在HTTP1.1中用的是Cache-control，里面有几个参数：max-range（过期时间范围），no-cache（走协商缓存），如果Expires和Cache-control同时存在，Cache-control的优先级更高。
强缓存的流程是：客户端检查本地缓存信息和缓存标识，有且未过期，客户端直接读取缓存信息。如果没有或过期，客户端重新向服务器发送HTTP请求，服务器会发送Expires和Cache-control等响应头和缓存标识，客户端把请求结果和缓存标识存储到浏览器。
强缓存的问题是：服务器内容更新了，如果本地有缓存，就拿不到最新的信息，所以HTML不做强缓存。
解决问题的办法有：
- 服务器资源更新后，用不同的资源名称
- 在文件后面添加hash表示，文件更新hash更新
- 当文件更新后，导入js的时候后面设置时间戳
- 不要用强缓存，用协商缓存
# 协商缓存：
协商缓存是走HTTP请求的，在响应头中HTTP1.0用的是Last-Modified，设置的是过期时间，在HTTP1.1中用的是Etag，是一个标识，根据资源文件生成的，每更新一次就会换一个标识。
在强缓存没有或者失效后，浏览器携带缓存标识像服务器发送请求（HTTP1.0是If-Modified-Since，HTTP1.1是If-None-Match），由服务器根据缓存标识检查是否使用缓存（如果返回304，表示内容没更新，通知客户端读取缓存信息，如果返回200，表示内容已更新并返回最新信息，还会返回Last-Modified和Etag缓存标识），客户端根据服务端给的状态码和内容，如果是304就直接读取缓存进行渲染，如果是200直接渲染，并将最新的内容和标识缓存到内存和硬盘中。
- 第一次发请求的时候，是无标识给服务器的，返回内容中有
Last-Modified和Etag，客户端把信息和标识缓存到本地 - 第二次发请求的时候，会携带标识HTTP1.0是
If-Modified-Since，HTTP1.1是If-None-Match，服务器根据请求头进行判断
# 2. 强缓存和协商缓存的区别是什么？
查看答案
强缓存不走http请求，协商缓存总是走http请求。响应头和过程也不一样。
# 3. 为什么协商缓存要有Etag？
查看答案
因为HTTP1.0的只能精确到秒，如果资源在1s内完成了更新那么就会不准确，所以需要用Etag进行区别。
# 4. Cache-control的值有哪些？
查看答案
- no-cache：强制走协商缓存
- no-store：不缓存请求或响应的内容
- max-range：缓存过期时间，单位秒，响应的最大Age值
- public：可向任意方提供响应的缓存
- Private：仅向特定用户返回响应
# 5. 使用缓存的好处？
查看答案
- 减少网页延迟
- 减少网络带宽，降低负荷
- 减少服务器负担
# 6. 缓存的文件在哪里？
查看答案
# from memory cache
缓存在内存里，优点是快速，缺点是页面关闭的时候缓存就会失效。
# from dist cache
缓存在磁盘里，虽然没有缓存在内存中快，但还是比请求快，优点可以一直保存，页面关闭后也不会消失。
# 7. 何时缓存在memory中，何时缓存在dist中？
查看答案
一般说，js、图片文件浏览器自动保存在memory中，但是并不绝对，基本上可以归结为，具体什么要看浏览器的控制：
- memory不够了就会存在dist中；
- 大一点的文件会缓存在dist里面，因为内存空间有限，磁盘的空间更大；
- 小一点的文件js、图片会存在memory中；
- css文件一般存在dist中，因为一般认为css不会频繁修改；
- 特殊情况下，因为memory大小是有限制的，浏览器会根据自己的算法把一些js文件存到dist里面去。