1. Problem analysis
1.1. Analysis 1 Browser Cache
The image address of the same name was changed in the project, and the image was not updated in time.
may be caused by browser caching. The browser will cache files that have been accessed before. The next time you access a file with the same name, it will be read from the cache first.
If the same image address has not changed, the browser will directly use the image in the cache instead of re-requesting the server. This resulted in the image displayed on the page not being updated in time after the address of the image with the same name was changed.
<img src="image.jpg?v=123456">
A non-repeating parameter is randomly generated each time it is loaded, so that the browser will think that this is a new address and will not read it from the cache, but will re-request the server to download a new image.
1.2. Analysis 2 CDN cache
The image address of the same name was changed in the project, and the image was not updated in time.
If your images are distributed through a CDN, clearing the browser cache may not be enough because the CDN will also have a certain cache time.
When you change the image address with the same name, the cache on the CDN will not expire immediately, but will need to wait for a certain period of time before being refreshed. Therefore, you need to clear the CDN cache to solve the problem of being unable to update in time after the address of the image with the same name is changed.
Different CDN providers may have different cache clearing methods. Most CDN providers provide very convenient cache refresh tools. You only need to enter the URL or directory you want to refresh, and then click the refresh button. Generally speaking, CDN refresh takes a certain amount of time to take effect, and the specific time depends on the refresh strategy and cache time of the CDN provider.
1.3. Analysis 3 CDN cache
The pictures requested by some users are new, and the pictures requested by some users are old. What is the reason?
This situation is most likely caused by the CDN cache not being completely refreshed.
When you change the image address with the same name, the cache on the CDN will not expire immediately, but will need to wait for a certain period of time before being refreshed. During this process, some users may request old cached images, and some users may request new images.
To solve this problem, you need to ensure that all users can request the latest images by clearing the CDN cache. The specific cache clearing methods of different CDN providers may vary, but they basically provide a cache refresh tool. You can enter the URL or directory you want to refresh, and then click the refresh button to clear the cache. Please note that CDN refresh takes a certain amount of time to take effect, and the specific time depends on the CDN provider's refresh policy and cache time.
1.4. Analysis 4: The interaction between browser caching and CDN caching
The same user sometimes sees the new one and sometimes the old one. Why?
If the same user requests the same image at different times and sometimes sees the new one and sometimes sees the old one, it may be due to the interaction between the browser cache and the CDN cache.
When the browser requests an image, it will first check whether its own cache has a cache corresponding to the image. If so, it will directly use the cache and will not request a new image from the server. The CDN cache update time may be relatively long, so before the browser cache expires, if there are still old images in the CDN cache, the user will see the old images.
The solution to this problem is to clear your browser cache. If you want to ensure that users can see the latest images, you can add a random number or timestamp as part of the image address after changing the image address. This can avoid the impact of browser and CDN cache and force the browser to re-request new images. picture of.
1.5. Analysis 5 Nodes accessing CDN
The same user sometimes sees the new one and sometimes the old one. Why?
The CDN node visited may affect whether the content the user sees is new or old.
CDN is a technology that improves website access speed by caching content. It will select the nearest CDN node to provide content based on the user's location.
If a CDN node caches old content, users may see the old content when they visit, while other CDN nodes that cache new content can provide new content to users. .
Therefore, the CDN node visited will have a certain impact on whether the content the user sees is new or old.
2. Solve problems
2.1. Method 1
You can just change the image address, cdn cache, cdn torrent
<img src="image1.jpg">
2.2. Method 2
<img src="image.jpg?v=123456">
2.3. Method three
You can use strong caching and negotiated caching mechanisms to control the validity period and update method of the browser cache.
2.4. Method 4
Clear CDN cache
2.5. Method five
If you're not in a hurry, you can wait~
3. Process records
Record 1. How to control the validity period and update method of browser cache using strong cache and negotiated cache mechanisms.
Strong caching and negotiated caching are two mechanisms that control how long browser caches last and how they are updated.
Strong caching
Strong caching is achieved by setting the Cache-Control and Expires fields in the response header. When setting the response header on the server side, you can control the validity period and update method of the browser cache by setting the Cache-Control and Expires fields. If the Cache-Control and Expires fields are set, when the client requests resources, it will first determine whether to use the cache by judging these two fields.
The Expires field specifies the expiration time, which is a specific point in time. For example: Expires: Wed, 21 Oct 2023 07:28:00 GMT. This time point is the server-side time. If the current time is before the expiration time, the browser will use the cache, otherwise it will request the server.
The Cache-Control field was introduced in HTTP/1.1, and multiple parameters can be set to control cache behavior. The more important ones are:
max-age: Specifies the maximum validity time of the cache, in seconds. For example: Cache-Control: max-age=3600 means caching for 1 hour. If the resource is requested again within this time, the browser will use the cache. public: Indicates that the response can be cached, including client cache and proxy server cache. private: Indicates that the response can only be cached by the client and cannot be cached by the proxy server.
Negotiate cache
Negotiating caching is achieved by setting the Last-Modified and ETag fields in the response header. When setting the response header on the server side, you can control the validity period and update method of the browser cache by setting the Last-Modified and ETag fields. If the Last-Modified and ETag fields are set, when the client requests resources, it will first send a request to the server, and the server will use If-Modified-Since (the value of Last-Modified) and If-None-Match in this request. (ETag value) field is compared with the resource in the server. If they are the same, it means that the resource has not been updated and caching can be used; otherwise, it means that the resource has been updated, and the server will return the resource content and set a new value in the response header. Last-Modified and ETag fields.
Strong cache and negotiated cache can control the validity period and update method of the browser cache by setting different cache headers. The specific settings can be adjusted according to the actual application scenario.
Record 2: Understanding CDN Torrent
CDN flooding is when a CDN (Content Delivery Network) server receives a large number of requests over a period of time. Some common workarounds include:
1. Increase the number of CDN servers: Increasing the number of CDN servers can share the traffic load and improve response speed and stability.
2. Optimize cache: Optimizing CDN cache can reduce server requests and reduce server load and response time.
3. Use load balancing: Using a load balancer can distribute requests to different CDN servers to better handle CDN floods.
4. Current limiting: By limiting the number of requests per second, you can reduce the impact of CDN flooding and protect the CDN server from overload attacks.
5. Use special solutions provided by CDN vendors: Some CDN vendors provide special solutions, including adaptive schedulers, preheating, dynamic defense, etc., to help enterprises solve problems such as CDN flooding.