How are the image cached in the browser?

最新推荐文章于 2022-03-16 20:50:05 发布

zd10101501

最新推荐文章于 2022-03-16 20:50:05 发布

阅读量301

点赞数

分类专栏：体验优化服务器

本文链接：https://blog.csdn.net/danzhang1010/article/details/80907773

版权

体验优化同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

服务器

2 篇文章 0 订阅

订阅专栏

Today I encounter a bug.The chrome browser has cached all the images .By chrome dev-tool can find that the images were loaded from the memory cache.As usual ， we can forcedly refresh the page(usint ctrl+f5).but we can’t tell all our clients to do that.

1. First try

Get learning about the concerned knowledge about cache.including etag,last-modified,expire,cache-control,

cache-control and expire define when the static files become invalid. If there is cached-control header that has max-age,or s-maxage, the expire will be ignored. * cache-control: no-cache.public, private,no-store,must-revalidate, max-age * expire: GMT timestamp.
The etag is a hash value which come from the file size, file content , last-modify-time and so on,last-modified means the latest modification timestamp, and it is a fallback mechanism.etag is more accurate.
If the sever doesn’t send the cached-control, the browser can choose to cache or no-cache the content.
From strockoverflow
From the the HTTP caching spec (section 13.4): Unless specifically constrained by a cache-control (section 14.9) directive, a caching system MAY always store a successful response (see section 13.8) as a cache entry, MAY return it without validation if it is fresh, and MAY return it after successful validation. This means that a user agent is free to do whatever it wants if no cache control header is sent. Most browsers use a combination of user settings and heuristics to determine whether (and how long) to cache in this situation.
In the chrome regarding this case,Chrome often cache the content, so we can find the http status code ‘200 cached from memory’

so adding the cache-control : no-cache in the nginx configuration.but it doesn’t work, the client told me that the page is still as same as before.debug it , find that her browser has cached the static files, even though I have add the cache-control,but before the static files expire ,the browser will not request the new resource.