本文详细介绍了浏览器缓存的工作原理，包括强缓存（Expires和Cache-Control）与协商缓存（Last-Modified，If-Modified-Since与ETag，If-None-Match）。通过实例解析了缓存的管理、应用及其在开发中的注意事项，强调了正确配置缓存对前端性能优化的重要性，并提出了解决资源更新问题的策略。同时提醒开发者注意动态资源的缓存使用，以避免因缓存导致的更新问题。
1）浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Expires的header，如：
2）浏览器在接收到这个资源后，会把这个资源连同所有response header一起缓存下来（所以缓存命中的请求返回的header并不是来自服务器，而是来自之前缓存的header）；
3）浏览器再请求这个资源时，先从缓存中寻找，找到这个资源后，拿出它的Expires跟当前的请求时间比较，如果请求时间在Expires指定的时间之前，就能命中缓存，否则就不行。
4）如果缓存没有命中，浏览器直接从服务器加载资源时，Expires Header在重新加载的时候会被更新。
Expires是较老的强缓存管理header，由于它是服务器返回的一个绝对时间，在服务器时间与客户端时间相差较大时，缓存管理容易出现问题，比如随意修改下客户端时间，就能影响缓存命中的结果。所以在http1.1的时候，提出了一个新的header，就是Cache-Control，这是一个相对时间，在配置缓存的时候，以秒为单位，用数值表示，如：Cache-Control:max-age=315360000，它的缓存原理是：
1）浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Cache-Control的header，如：
2）浏览器在接收到这个资源后，会把这个资源连同所有response header一起缓存下来；
3）浏览器再请求这个资源时，先从缓存中寻找，找到这个资源后，根据它第一次的请求时间和Cache-Control设定的有效期，计算出一个资源过期时间，再拿这个过期时间跟当前的请求时间比较，如果请求时间在过期时间之前，就能命中缓存，否则就不行。
4）如果缓存没有命中，浏览器直接从服务器加载资源时，Cache-Control Header在重新加载的时候会被更新。
Cache-Control描述的是一个相对时间，在进行缓存命中的时候
最低0.47元/天 解锁文章
扫一扫
1300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
