浏览器缓存 HTTP缓存-CDN缓存-localstorage/sessionstorage/cookie

浏览器缓存

面试题

• 浏览器缓存http缓存 + CDN缓存
• Etag的优势，为什么用Etag取代last-modify
• 命中缓存会返回怎样的响应？协商缓存根据什么去判断的？
• http缓存的请求头字段
• 谈谈cdn

概述

浏览器缓存

• HTTP缓存 两者最大的区别在于本地缓存命中时，是否需要和服务器通信
  • 强制缓存 本地缓存命中时，直接从强制缓存种返回请求响应，不用和服务器进行任何通信
  • 协商缓存 本地缓存命中时，向服务器端发起一次GET请求，与之协商当前浏览器保存的本地缓存是否有效。
• localstorage、sessionstorage、cookie --> 可以引出面试题:这三者之间的区别
• CDN(Content Delivery Network)内容分发网络缓存

缓存的作用:降低资源的重复加载提高网页的整体加载速度。

HTTP缓存 -提高二次请求响应速度

HTTP缓存策略

• 强制缓存:当本地资源命中后，直接从强制缓存种返回请求响应，返回的响应码为200，不用和服务器进行任何通信
• 协商缓存:当本地资源命中后，向服务器端发起一次GET请求，与之协商当前浏览器保存的本地缓存是否有效。

HTTP的缓存控制,如何设置缓存策略

通过设置响应头以及请求头来控制缓存策略

• 强制缓存在意的是本次请求资源缓存有没有过期
• 协商缓存在意的是本次缓存是否有更新

强制缓存有两个相关的响应头

1. Expires字段 浏览器收到带有此字段的响应体后进行缓存，控制缓存失效日期时间戳。发送相同的资源请求时，会对比expires和当前的时间戳，如果没有过期，直接使用缓存。
   存在问题:对本地时间戳过分依赖，如果修改了本地时间，可能会造成缓存失效。HTTP1.1新增Cache-Control字段来对expires的功能进行扩展和完善，优先级高于Expires字段

   Expires: Wed, 22 Oct 2018 08:41:00 GMT
   

2. Cache-Control字段的max-age属性: 控制响应资源的有效期，表示响应资源在被请求到后的30s内有效，可以避免服务端和客户端时间戳不同步而造成的问题。

   Cache-control: max-age=30 //秒为单位
   

Cache-Control: no-cache 表示强制协商缓存
Cache-Control: no-store 表示禁止使用任何缓存策略

协商缓存的通过两对Header来控制

协商缓存可以通过 Last-Modified/If-Modified-Since和ETag/If-None-Match这两对 Header 来控制。

• Last-Modified 和 If-Modified-Since
  • 1.服务器响应返回Last-Modified表示该资源最近一次修改的时间戳
  • 2.浏览器再次请求时，向服务器端发起一次GET请求协商当前浏览器保存的本地缓存是否有效。此时GET请求的请求头中会添加If-Modified-Since: Last-Modified，从该日期后资源是否有更新
  • 3.服务端收到此请求头发现有if-Modified-Since，则与被请求资源的最后修改时间进行对比，如果一致则 返回304表示缓存有效响应重定向到本地缓存上。反之返回状态码为200的修改之后的资源

Last-Modified 存在的问题
1.只根据资源最后的修改时间戳进行判断，如果打开了文件没有修改，时间戳也会更新
2.表示文件资源修改的时间戳单位是秒，如果修改速度非常快，无法识别出此次文件资源已更新

从HTTP1.1增加Etag字段，Etag字段是根据hash运算生成的字符串，只要文件内容编码出现差异，对应的ETag字段就会不同。ETag 优先级比 Last-Modified 高。

• ETag 和 If-None-Match
  当请求过期时，
  • 1.浏览器则会继续发起网络请求，并且在HTTP请求头中添加If-None-Match:Etag值
  • 2.服务器接收到后进行标识进行对比。如果相同说明资源没有修改，则响应返 304，浏览器直接从缓存中获取数据信息。如果不同则说明资源被改动过，则响应整个资源内容，返回状态码 200。

if-xxx开头的是条件请求，服务器接收到附带条件的请求后，当条件为真时，才会执行请求。
If-None-Match的Etag值没有匹配上说明资源更新或不存在，服务器重新返回资源，否则服务器返回304表示缓存内容没有改动，这个缓存可以继续使用，这次就不重复发送数据给你了。

当强制缓存失效可以进入到协商缓存
协商缓存就是强缓存失效后，浏览器携带缓存标识向服务器发送请求，由服务器根据缓存标识来决定是否使用缓存的过程。

返回200的情况

CDN缓存 -提高首次请求资源的响应速度

CDN(Content Delivery Network) 内容分发网络，由遍布在各个地方的服务器组成，主要存放静态资源。用户访问资源时，CDN系统能够实时地根据网络情况、负载情况以及距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上，提高响应速度

针对静态资源
CDN往往用来存放网站的静态资源文件，比如第三方库的JavaScript脚本文件、样式表文件及图片等。这些文件的特点是访问频率高但更新修改频次低，且不与业务有太多耦合。

cdn优势
1.CDN节点解决了跨运营商和跨地域访问的问题，访问延时大大降低。
2.大部分请求在CDN边缘节点完成，CDN起到了分流作用，减轻了源服务器的负载

CDN的核心功能

1. 缓存
   将所需的静态资源文件复制一份到CDN缓存服务器上
2. 回源
   如果未在CDN缓存服务器上查找到目标资源或缓存资源过期，会重新追溯到网站根服务器获取相关资源

CDN的基本原理

假如没有CDN，我们访问资源时会使用DNS进行解析获取资源服务器的IP地址进行数据交互。

1.当用户在浏览器中输入所要访问的域名时，若本机无法完成域名解析工作，则会转向DNS服务器请求对该域名的解析。
2.DNS服务器解析完成返回给浏览器该域名所对应的IP地址
3.浏览器向该IP地址指向的服务器发起资源请求
4.最后服务器响应用户请求将资源返回给浏览器

有了CDN后

1.当用户在浏览器中输入所要访问的域名时，经过本地DNS系统解析没有命中后，DNS系统会最终将域名的解析权交给对应的CDN专用DNS服务器。
2.CDN的DNS服务器返回负载均衡器的IP
3.浏览器重新向该负载均衡器发起请求，负载均衡器进行计算后，返回给用户缓存服务器IP地址
4.浏览器向缓存服务器请求所需资源的过程

localstorage/sessionstorage/cookie

学习笔记: https://blog.youkuaiyun.com/qq_41370833/article/details/125639364