HTTP缓存引发的一个问题

有一次在开发移动端H5项目，UI提了几个UI问题，经过样式调试，android上没有样式问题，ios却存在样式问题。然后经过细心调试发现自己加的css类名是生效的，但是该类名的样式是不存在。
真是奇怪为啥android和ios的样式内容不一样呢？
（1）打包后的css文件名为default.css。ios样式没有生效说明改css被缓存了，再怎么该也会不生效的。可以使用文件指纹内容hash值来解决。
（2）之所以android和ios表现不同，可能两者采用的浏览器内核不一样，其缓存机制也会不一样。关于HTTP缓存还有一个启发式缓存即HTTP 旨在尽可能多地缓存，因此即使没有给出 Cache-Control，如果满足某些条件，响应也会被存储和重用。

HTTP缓存的作用

1. 减少带宽，减少服务器的压力
2. 提升网站性能，增加用户体验

HTTP缓存的分类

1. 强制缓存
2. 协商缓存
   二者区别：浏览器是否需要向服务器进行询问缓存是否有效，进而判断是否需要对响应内容重新请求。

强制缓存

1. Expires：设置一个绝对时间。浏览器时间会与服务器时间相差8小时，即浏览器时间加上8小时为服务器时间。 该缓存方式对本地时间过分依赖，如果本地时间和服务器时间不同步，或者客户端时间主动被修改，那么对于缓存过期的判断可能就无法和预期相符。

res.writeHead(200, {Expires: new Date('2023-2-26 20:27:00').toUTCString()
})

2. Cache-Control: max-age ：设置一个相对时间，单位是s。

res.writeHead(200, {Cache-Control: 'max-age=5'
})

---

协商缓存（解决强缓存下资源不更新问题）

Cache-Control: no-cache，其中no-store是不缓存， no-cache为协商缓存（即对于每次发起的请求都不会判断强制缓存是否过期，而是直接与服务器协商来验证缓存的有效性，若缓存未过期，则会使用本地缓存，反之。） 其中public和private，这两个属性值用于明确资源是否可以被代理服务器进行缓存。

last-modified和ETag需要设置为响应头。后续请求浏览器会在请求头自动携带if-modified-since和if-not-match
（1）last-modified 和 if-modified-since
根据资源最后修改的时间戳进行判断资源是否改变。（比如说只改了改文件名字，文件内容并没有变化，依旧会请求新的资源。再者改属性值的单位是秒，如果文件修改为毫秒级别，是无法识别出改文件是更新的）
（2）ETag（实体标签）和 if-not-match
根据文件内容生成Etag。ETag并非last-modified的替代方案，而是last-modified的补充方案。因为服务器对于文件资源生成Etag需要付出额外的计算开销，如果资源较大且多，再加上更改频繁，那么生产ETage的过程就会影响服务器的性能。

缓存策略

一般HTML文件会做为主文件，包含js、css。为保证当其内容发生修改时可以及时更新，应当将其设置为协商缓存。
其次是图片资源，因为网站对图片的修改基本是更换修改，同时考虑到图片文件的数量及大小可能对客户端缓存空间造成不小的开销，所以可以采取强缓存且过期时间不宜过长（一周即可）。
对于css和js文件，由于其属于文本文件，可能存在内容不定期的修改，又想使用强缓存（一年）来提高重用效率。所以可以在文件命名中增加文件指纹即hash值