A simple way to clear the CSS, JavaScript and background image cache in the browser

In the actual project development process, the page is uploaded to the server. In order to reduce the pressure on the server and let users load less, the browser will cache images, CSS, and JS locally for use the next time the website is visited. Doing so not only reduces the pressure on the server, but also reduces the number of downloads for users, providing a better user experience.

However, when upgrading the version or making some adjustments to CSS, JS, etc., the cache causes users to be unable to display the updated style, which is a headache. Unless the user manually upgrades the cache, almost all users will not manually clear the cache in order to access the website normally, because users don’t know whether it is a cache problem. In the final analysis, users just think that there is a problem with your page and it cannot be accessed normally.

In order to use the cache normally and avoid such problems, we can use our brains to think about how to solve this problem?

If the changed style cannot be accessed normally, what about changing the style file name? The answer is yes, and it will not be verified here. However, it is obviously too troublesome to manually change the file name every time. Is it possible not to change the file name? The answer is yes. We may add a version number after the imported file name, which is different from the previous version (usually the update date). The code is as follows:

Copy code

The code is as follows:

You can see that my CSS file name and JS file name are followed by "v=20140829". This way, I can cache the files without changing the file name and update them in real time. "v=20140829" is just a common writing habit and can be changed to other ones.

Finally, there are pictures. Generally, pictures with img tags will not have duplicate names because the file names are generated in the background. If it is a picture with a fixed file name, the method is the same as above. As for the background image, since the style name is changed, the image resolution path is naturally updated synchronously, so the background image is also updated.

<<: Summary of MySQL's commonly used database and table sharding solutions

>>: Detailed explanation of basic concepts of HTML

Using Docker run options to override settings in the Dockerfile

A simple way to clear the CSS, JavaScript and background image cache in the browser

Using Docker run options to override settings in the Dockerfile

Vue3.0 handwriting magnifying glass effect

Example of using CSS filter to write mouse over effect

About the IE label LI text wrapping problem

Detailed explanation of Vite's new experience

How to install Zookeeper service on Linux system

40+ Beautiful Web Form Design Examples

Detailed process of deploying Docker to WSL2 in IDEA

Vue routing returns the operation method of restoring page status

How to configure Nginx to distinguish between PC or mobile phone access to different domain names

Recommend

Graphic tutorial on configuring nginx file server in windows 10 system

Detailed explanation of Docker container network port configuration process

Detailed explanation of MySQL backup process using Xtrabackup

W3C Tutorial (4): W3C XHTML Activities

iview implements dynamic form and custom verification time period overlap

Some "pitfalls" of MySQL database upgrade

Docker uses nextcloud to build a private Baidu cloud disk

MYSQL master-slave replication knowledge points summary

Solution to the problem of not being able to access the home page when adding a tomcat container to Docker

MySQL transaction autocommit automatic commit operation

MySQL full backup and quick recovery methods

Real-time refresh of long connection on Vue+WebSocket page

Mysql example of splitting into multiple rows and columns by specific symbols

Solve the error "Can't locate ExtUtils/MakeMaker.pm in @INC"

Analysis of GTK treeview principle and usage