浏览器-缓存

缓存

https://blog.csdn.net/qq_25135655/article/details/105969378

1. 概念：

   1. 在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。那么下面我们就来看看服务器端缓存的原理

2. web 缓存的类型：

   1. 数据库缓存
   2. 代理服务器缓存
   3. CDN 缓存
   4. 浏览器缓存
   5. web 应用层缓存
   6. http 缓存

4. 前端缓存分类

   1. 前端缓存主要是分为 HTTP 缓存和浏览器缓存。其中 HTTP 缓存是在 HTTP 请求传输时用到的缓存，主要在服务器代码上设置；而浏览器缓存则主要由前端开发在前端 js 上进行设置。
      缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。
      对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。

   2. HTTP 缓存

      1. HTTP 缓存都是从第二次请求开始的。

         第一次请求资源时，服务器返回资源，并在 respone header 头中回传资源的缓存参数;第二次请求时，浏览器判断这些请求参数，击中强缓存就直接 200，否则就把请求参数加到 request header 头中传给服务器，看是否击中协商缓存，击中则返回 304，否则服务器会返回新的资源。

      2. HTTP 缓存分为强缓存和协议缓存，它们的区别如下

      5. 最佳优化策略：因为协商缓存本身也有 http 请求的损耗，所以最佳优化策略是要尽可能的将静态文件存储为较长的时间，多利用强缓存而不是协商缓存，即消灭 304。

         但是给文件设置一个很长的 Cacha-Control 也会带来其他的问题，最主要的问题是静态内容更新时，用户不能及时获得更新的内容。这时候就要使用 hash 的方法对文件进行命名，通过每次更新不同的静态文件名来消除强缓存的影响。

   3. 浏览器缓存

      1. 本地存储小容量

         1. Cookie 主要用于用户信息的存储，Cookie 的内容可以自动在请求的时候被传递给服务器。

            LocalStorage 的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止。

            SessionStorage 的其他属性同 LocalStorage，只不过它的生命周期同标签页的生命周期，当标签页被关闭时，SessionStorage 也会被清除

      2. 本地存储大容量

         1. WebSql 和 IndexDB 主要用在前端有大容量存储需求的页面上，例如，在线编辑浏览器或者网页邮箱

      3. 应用缓存与 PWA

         1. 应用缓存全称为 Offline Web Application，它的缓存内容被存在浏览器的 ApplicaTIon Cache 中。它也是一个被 W3C 标准废弃的功能，主要是通过 manifest 文件来标注要被缓存的静态文件清单。但是在缓存静态文件的同时，也会默认缓存 html 文件。这导致页面的更新只能通过 manifest 文件中的版本号来决定。而且，即使我们更新了 version，用户的第一次访问还是会访问到老的页面，只有下一次再访问才能访问到新的页面。所以，应用缓存只适合那种常年不变化的静态网站。如此的不方便，也是被废弃的重要原因。

            PWA 全称是渐进式网络应用，主要目标是实现 web 网站的 APP 式功能和展示。尽管 PWA 也有 manifest 文件，但是与应用缓存却完全不同。不同于 manifest 简单的将文件通过是否缓存进行分类，PWA 用 manifest 构建了自己的 APP 骨架。另外，PWA 用 Service Worker 来控制缓存的使用。这一块的内容较多，在这里就不详细展开了。

      4. 往返缓存

         1. 往返缓存又称为 BFCache，是浏览器在前进后退按钮上为了提升历史页面的渲染速度的一种策略。BFCache 会缓存所有的 DOM 结构，但是问题在于，一些页面开始时进行的上报或者请求可能会被影响。这个问题现在主要会出现在微信 h5 的开发中。

   4. 页面的缓存状态是由 header 决定的，header 的参数有四种：

      1. Cache-Control：
         1. max-age（单位为 s）指定设置缓存最大的有效时间，定义的是时间长短。当浏览器向服务器发送请求后，在 max-age 这段时间里浏览器就不会再向服务器发送请求了。
         2. s-maxage（单位为 s）同 max-age，只用于共享缓存（比如 CDN 缓存）。
         3. public 指定响应会被缓存，并且在多用户间共享。也就是下图的意思。如果没有指定 public 还是 private，则默认为 public。
         4. private 响应只作为私有的缓存（见下图），不能在用户间共享。如果要求 HTTP 认证，响应会自动设置为 private。
         5. no-cache 指定不缓存响应，表明资源不进行缓存
         6. no-store 绝对禁止缓存，一看就知道如果用了这个命令当然就是不会进行缓存啦～每次请求资源都要从服务器重新获取
         7. must-revalidate 指定如果页面是过期的，则去服务器进行获取。这个指令并不常用，就不做过多的讨论了
      2. Expires
      3. Last-modified
      4. ETag

   5. ​

   6. cookies，sessionStorage 和 localStorage 的区别

      1. 共同点：都是保存在浏览器端，且是同源的。
      2. 区别：
         1. 数据存储方面
            1. cookies 是为了标识用户身份而存储在用户本地终端上的数据，始终在同源 http 请求中携带，即 cookies 在浏览器和服务器间来回传递，
            2. 而 sessionstorage 和 localstorage 不会自动把数据发给服务器，仅在本地保存。
         2. 存储大小的限制不同。
            1. cookie 保存的数据很小，不能超过 4k，
            2. 而 sessionstorage 和 localstorage 保存的数据大，可达到 5M。
         3. 数据的有效期不同。
            1. cookie 在设置的 cookie 过期时间之前一直有效，即使窗口或者浏览器关闭。
            2. sessionstorage 仅在浏览器窗口关闭之前有效。
            3. localstorage 始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。
         4. 作用域不同。
            1. cookie 在所有的同源窗口都是共享；
            2. sessionstorage 不在不同的浏览器共享，即使同一页面；
            3. localstorage 在所有同源窗口都是共享

   7. Session 和 Cookie 的区别与联系

      1. 会话的概念
         1. 会话就好比打电话，一次通话可以理解为一次会话。我们登录一个网站，在一个网站上不同的页面浏览，最后退出这个网站，也是一个会话。一个网站对于不同的用户会展示出不同的页面信息，但是在 HTTP 协议中，客户端请求服务端是一种无状态的连接-每次请求都是独立的请求，服务器怎么分辨这些请求是哪个用户发出的请求呢？
         2. 如果不能分辨哪个用户发出的请求，就不知道该反馈哪个用户的信息回来，那试想我们登录网站之后，显示的都是别人的信息岂不乱套了。所以服务器需要知道发出请求的是谁，需要一个用户标识来保证会话的正常进行。
      2. Session 的概念
         1. Session 是存放在服务器端的，类似于 Session 结构来存放用户数据，当浏览器 第一次发送请求时，服务器自动生成了一个 Session 和一个 Session ID 用来唯一标识这个 Session，并将其通过响应发送到浏览器。当浏览器第二次发送请求，会将前一次服务器响应中的 Session ID 放在请求中一并发送到服务器上，服务器从请求中提取出 Session ID，并和保存的所有 Session ID 进行对比，找到这个用户对应的 Session。
         2. 由于 Session 存放在服务器端，所以随着时间的推移或者用户访问的增多，会给服务器增加负担。使用的时候要考虑下服务器的性能。
      3. Cookie 的概念
         1. Cookie 实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户状态，就使用 response 向客户端浏览器颁发一个 Cookie。客户端会把 Cookie 保存起来。 2. 由于 Cookie 是存放在客户端，是可见的，安全性就会很低。因此不建议将一些重要的信息放在 cookie 中。
      4. 两者的区别
         1. cookie 数据存放在客户端，session 数据放在服务器上。 2. cookie 不是很安全，别人可以分析存放在本地的 cookie 并进行 cookie 欺骗，考虑到安全应当使用 session。 3. session 会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能，考虑性能应当使用 cookie。 4. 不同浏览器对 cookie 的数据大小限制不同，个数限制也不相同。 5. 可以考虑将登陆信息等重要信息存放为 session，不重要的信息可以放在 cookie 中
      5. 两者的联系
         1. 都是用来记录用户的信息，以便让服务器分辨不同的用户。
         2. 可以搭配使用，但都有自己的使用局限，要考虑到安全和性能的问题

   8. 谈谈 cookie 的弊端

   9. sessionstorage 和 localstorage 和 session 的异同点

   10. webstorage 和 cookie 相比存在的优势

   11. 前端存储值有哪些方式

   12. 浏览器缓存有哪些

   13. HTML5 的离线储存怎么使用，工作原理能不能解释一下？

       在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
       
       原理：HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
       
       如何使用：
       
       （1）创建一个和 html 同名的 manifest 文件，然后在页面头部像下面一样加入一个 manifest 的属性。
       
       <html lang="en" manifest="index.manifest">
       
       （2）在如下 cache.manifest 文件的编写离线存储的资源。
       CACHE MANIFEST
       #v0.11
       CACHE:
       js/app.js
       css/style.css
       NETWORK:
       resourse/logo.png
       FALLBACK:
       / /offline.html
       
       CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
       
       NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
       
       FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。
       
       （3）在离线状态时，操作 window.applicationCache 进行离线缓存的操作。
       
       
       如何更新缓存：
       
       （1）更新 manifest 文件
       （2）通过 javascript 操作
       （3）清除浏览器缓存
       
       注意事项：
       
       （1）浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
       （2）如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
       （3）引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下。
       （4）FALLBACK 中的资源必须和 manifest 文件同源。
       （5）当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
       （6）站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。
       （7）当 manifest 文件发生改变时，资源请求本身也会触发更新。
       

   14. 浏览器本地数据库, Web SQL, indexedDB, cache storage.

   15. 前端的缓存方案有哪些. https://www.jianshu.com/p/4d55fa41f7ee?utm_campaign=haruki