一、缓存存放位置，和读取优先级
优先级就是按下面顺序
1.Service Worker
参考service work相关
2.Memory Cache(内存)
就是将资源存储在内存中，下次访问直接从内存中读取。例如刷新页面时，很多数据都是来自于内存缓存。一般存储脚本、字体、图片。
优点是读取速度快；缺点由于一旦关闭Tab标签页，内存中的缓存也就释放了，所以容量和存储时效上差些。
Disk Cache(硬盘)
就是将资源存储在硬盘中，下次访问时直接从硬盘中读取。它会根据请求头中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。并且即使是跨域站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次请求。
优点是缓存在硬盘中，容量大，并且存储时效性更长；缺点是读取速度慢些
Push Cache
这个是推送缓存，是HTTP/2中的内容，当上面三种缓存都没有命中时才会，被使用。它只会存在于Session中，一旦会话结束就会释放，所以缓存时间很短，而且Push Cache中的缓存只能被使用一次
二、缓存
1.http缓存
参考http缓存相关
2.CDN缓存
CDN(Content Delivery Network)就是内容分发网络，是构建在现有网络基础之上的智能虚拟网络。依靠部署在各个地方的边缘服务器，通过分布式存储、负载均衡、网络请求的重定向和内容管理等功能模块，以就近性和服务器负载的判断，确保内容以一种极为高效的方式为用户请求提供所需要的资源。
- 无cdn
- 有cdn
哪些情况推荐使用CDN
一般来说以资讯、内容等为主的网站，具有一定访问体量的网站资讯网站、政府机构网站、行业平台网站、商城等以动态内容为主的网站论坛、博客、交友、SNS、网络游戏、搜索/查询、金融等。
提供http下载的网站软件开发商、内容服务提供商、网络游戏运行商、源码下载等。
有大量流媒体点播应用的网站拥有视频点播平台的电信运营商、内容服务提供商、体育频道、宽频频道、在线教育、视频博客等
哪些情况不适用CDN
有针对性、特定性、服务少数用户的用户群
给定地理区域，本地化的用户群
用户数据敏感、数据管辖范围限制的有监管和复杂的治理要求的
3.网关缓存
4.DNS缓存
进入页面的时候会进行DNS查询，找到域名对应的服务器的IP地址，再发送请求
在第一次进入页面后就会把DNS解析的地址记录缓存在客户端，之后再进的话至少不需要发起后面的迭代查询了，从而速度更快
5.代理缓存
代理服务器如nginx对资源进行缓存
6.其他缓存概念
浏览器中的缓存
webview中的缓存
nginx之类代理服务器中的缓存
数据库中缓存
三、本地存储
Cookie
最早被提出来的本地存储方式，在每一次 http 请求携带 Cookie，可以判断多个请求是不是同一个用户发起的，特点是：
有安全问题，如果被拦截，就可以获得 Session 所有信息，然后将 Cookie 转发就能达到目的。(关于攻击和防范本可以看我另一篇文章 吃透浏览器安全（同源限制/XSS/CSRF/中间人攻击）)
每个域名下的Cookie不能超过20个，大小不能超过4kb
Cookie在请求新页面的时候都会被发送过去
Cookie创建成功名称就不能修改
跨域名不能共享Cookie
如果要跨域名共享Cookie有两个方法
用 Nginx 反向代理
在一个站点登录之后，往其他网站写 Cookie。服务端的 Session 存储到一个节点，Cookie 存储 SessionId
Cookie的使用场景
最常见的就是 Cookie 和 Session 结合使用，将 SessionId 存储到 Cookie 中，每次请求都会带上这个 SessionId 这样服务端就知道是谁发起的请求
可以用来统计页面的点击次数
Cookie都有哪些字段
Name、Size故名思意Value：保存用户登录状态，应该将该值加密，不能使用明文Path：可以访问此 Cookie 的路径。比如 juejin.cn/editor ，path是/editor，只有/editor这个路径下的才可以读取 CookiehttpOnly：表示禁止通过 JS 访问 Cookie，减少 XSS 攻击。Secure：只能在 https 请求中携带SameSite：规定浏览器不能在跨域请求中携带 Cookie 减少 CSRF 攻击，详细说明看这里Domain：域名，跨域或者 Cookie 的白名单，允许一个子域获取或操作父域的 Cookie，实现单点登录的话会非常有用Expires/Max-size：指定时间或秒数的过期时间，没设置的话就和 Session 一样关闭浏览器就失效
LocaStorage
是H5的新特性，是将信息存储到本地，它的存储大小比 Cookie 大得多，有5M，而且是永久存储，除非主动清理，不然会一直存在
受到同源策略限制，就是端口、协议、主机地址有任何一样不同都不能访问，还有在浏览器设为隐私模式下，也不能读取 LocalStorage
它的使用场景就很多了，比如存储网站主题、存储用户信息、等等，存数数据量多或者不怎么改变的数据都可以用它
SessionStorage
SessionStorage 也是H5新特性，主要用于临时保存同一窗口或标签页的数据，刷新页面时不会删除，但是关闭窗口或标签页之后就会删除这些数据
SessionStorage 和 LocalStorage 一样是在本地存储，而且都不能被爬虫爬取，并且都有同源策略的限制，只不过 SessionStorage 更加严格，只有在同一浏览器的同一窗口下才能共享
它的 API 和 LocalStorage 也一样 getItem、setItem、removeItem、clear、key
它的使用场景一般是具有时效性的，比如存储一些网站的游客登录信息，还有临时的浏览记录等
indexDB
是浏览器本地数据库，有以下特点
键值对储存：内部用对象仓库存放数据，所有类型的数据都可以直接存入，包括js对象，以键值对的形式保存，每条数据都有对应的主键，主键是唯一的异步：indexDB操作时用户依然可能进行其他操作，异步设计是为了防止大量数据的读写，拖慢网页的表现支持事务：比如说修改整个表的数据，修改了一半的时候报了个错，这时候会全部恢复到没修改之关的状态，不存在修改一半成功的情况同源限制：每一个数据库应创建它对应的域名，网页只能访问自身域名下的数据库存储空间大：一般来说不少于250MB，甚至没有上限支持二进制存储：比如ArrayBuffer对象和Blob对象
前端存储方式除了上面四个，还有WebSQL，类似于SQLite，是真正意义上的关系型数据库，可以使用sql进行操作，只是用js时要进行转换，比较麻烦
上面四个的区别
| Cookie | SessionStorage | LocalStorage | indexDB | |
|---|---|---|---|---|
| 存储大小 | 4k | 5M或更大 | 5M或更大 | 无限 |
| 存储时间 | 可指定时间,没指定关闭窗口就失效 | 浏览器窗口关闭就失效 | 永久有效 | 永久有效 |
| 作用域 | 同浏览器，所有同源标签页 | 当前标签页 | 同浏览器，所有同源标签页 | |
| 存在于 | 请求中来回传递 | 客户端本地 | 客户端本地 | 客户端本地 |
| 同源策略 | 同浏览器，只能被同源同路径页面访问共享 | 自己用 | 同浏览器，只能被同源页面访问共享 |
五、几种刷新和回车的区别
使用
Ctrl+F5强制刷新页面时，会对本地缓存文件直接过期，然后跳过强缓存和协商缓存，直接请求服务器点击刷新或
F5刷新页面时，对本地缓存文件过期，然后带If-Modifed-Since和If-None-Match发起协商缓存验证新鲜度浏览器输入URL回车，浏览器查找
Disk Cache，有则使用，没有则发送网络请求