缓存
前端缓存
CDN(Content Delivery Network)
CDN 是一种部署策略，根据不同的地区部署类似nginx 这种服务服务，会缓存静态资源。前端在项目优化的时候，习惯在静态资源上加上一个 hash 值，每次更新的时候去改变这个 hash，hash 值变化的时候，服务会去重新取资源.
(CDN)是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容 管理4个要件.
3.CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中 在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。
CDN 的核心点有两个，一个是缓存，一个是回源。
“缓存”就是说我们把资源 copy 一份到 CDN 服务器上这个过程
“回源”就是说 CDN 发现自己没有这个资源（一般是缓存的数据过期了），转头向根服务器（或者它的上层服务器）去要这个资源的过程。
缓存方法
怎么处理浏览器缓存问题？
可以在修改后的文件末加一个版本号，还可以用gulp配置自动更新版本号。
- Cookie
- Session
- sessionStorge
- localStorge applicationCache是html5新增的一个离线应用功能
•离线浏览: 用户可以在离线状态下浏览网站内容。
•更快的速度: 因为数据被存储在本地，所以速度会更快.
•减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。
在对应用进行缓存的时候需要一个manifest文件
cookie，localStorage，sessionStorage，indexDB
特性 cookie localStorage sessionStorage indexDB
数据生命周期 一般由服务器生成，可以设置过期时间 除非被清理，否则一直存在 页面关闭就清理 除非被清理，否则一直存在
数据存储大小 4K 5M 5M 无限
与服务端通信 每次都会携带在 header 中，对于请求性能影响 不参与 不参与 不参与
Localstorage存储对象分为两种：
sessionStorage： session即会话的意思，在这里的session是指用户浏览某个网站时，从进入网站到关闭网站这个时间段，session对象的有效期就只有这么长。
localStorage： 将数据保存在客户端硬件设备上，不管它是什么，意思就是下次打开计算机时候数据还在。 两者区别就是一个作为临时保存，一个长期保存。
缓存的区别？
cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。
存储大小： cookie 数据大小不能超过 4k。
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。
有效期（生命周期）：
localStorage: 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage: 数据在当前浏览器窗口关闭后自动删除。
cookie: 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭 共享
sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享
sessionStorage 、localStorage 和 cookie 之间的区别
共同点：都是保存在浏览器端，且同源的。
区别：cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
301/302/304
301与302区别，什么时候返回304
301和302 代表着某个URL发生了转移
301 代表永久性转移
302 代表暂时性转移
304 （未修改）自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容
缓存优先级
pragma>cache-control>expires
Etag>Last-Modified
ctrl + f5 f5 刷新
会发生什么
ctrl + f5: 清空数据缓存，刷新页面
在请求信息头中设置cache-control: no-cache,pragma: no-cache，直接从服务器获取缓存返回
f5： 刷新当前活动页面
向服务器发送if-modified-since请求信息头到服务端返回304，使用本地缓存
浏览器缓存主要有两类：缓存协商和彻底缓存，也有称之为协商缓存和强缓存
强缓存：只要请求了一次，在有效时间内，不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码;
协商缓存：向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；
共同点：都是从客户端缓存中读取资源；
区别： 强缓存不会发请求，协商缓存会发请求
浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。
浏览器缓存的优点有：
- 减少了冗余的数据传输，节省了网费
- 减少了服务器的负担，大大提升了网站的性能
- 加快了客户端加载网页的速度