web的缓存

Posted 2022-12-14 wen_rc

缓存就是用空间换时间，提前把可能要加载的数据，放到读取速度更快的存储空间中，加快下次读取效率。
web前端的缓存有哪些呢？

DNS缓存

dns解析可能很费时间,针对dns解析，浏览器有缓存或预读取机制。预读取机制看

https://developer.mozilla.org/zh-CN/docs/Controlling_DNS_prefetching

缓存机制也分为多级：

1. 浏览器缓存
2. 系统缓存
3. 路由器缓存
4. ISP缓存（电信这些运营商的）
5. 逐级向上的DNS解析服务器

浏览器缓存

对静态资源，如js、img、css等，存在浏览器缓存中，而不从服务器请求。
打开chrome的开发者工具，选network，不选disable cache，刷新网页，会发现有些请求0ms就完成，size那显示memroy cache，有些请求1ms完成，size显示disk cache。
这两篇文章讲的比较详细：

https://segmentfault.com/a/1190000006689795
https://www.cnblogs.com/vajoy/p/5341664.html

Expires字段，资源过期的绝对时间。

Cache-Control，提供更丰富的控制机制。

Last-Modified，资源最后一次修改时间，是否过期交给服务器判断，消除expires使用绝对时间的误差。last modified是服务器生成的，也交给服务器验证，消除服务器与客户端的时间差异。

ETag，一个校验值，确认资源是否被修改。哪怕last modified改了，但可能实际内容没改，ETAG是为了避免这种情况带来的浪费。

服务器返回304，告知浏览器可使用缓存的数据，数据未修改。

假设资源是可缓存的，不需要每次验证，那会直接返回200，从浏览器缓存读取。

CDN

把数据从中心机房提前copy一份下发到各个城市的服务器（获取路由器等其他离用户更近的设备）中，让该城市的用户更快获取到资源。