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

Docker installation and configuration steps for MySQL

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

Docker installation and configuration steps for MySQL

Detailed explanation of views in MySQL

Vue calls the computer camera to realize the photo function

Detailed steps for QT to connect to MYSQL database

Comparison between Redis and Memcache and how to choose

Detailed graphic explanation of setting up routing and virtual machine networking in Linux

Detailed explanation of routing parameter passing and cross-component parameter passing in Vue

HTML+CSS to create a top navigation bar menu

Understanding of CSS selector weight (personal test)

Implementation code of short video (douyin) watermark removal tool

Recommend

Nginx reverse proxy forwards port 80 requests to 8080

Several skills you must know when making web pages

Steps to enable TLS in Docker for secure configuration

Implementation of inserting millions of records into MySQL database within 10 seconds

How to use Docker to build a development environment (Windows and Mac)

Detailed explanation of CSS background and border tag examples

Docker installation of MySQL (8 and 5.7)

Example analysis of mysql variable usage [system variables, user variables]

Solution for using Baidu share on Https page

Discussion on default margin and padding values of common elements

How to configure Nginx virtual host in CentOS 7.3

Detailed explanation of docker network bidirectional connection

VMware virtualization kvm installation and deployment tutorial summary

Vue implements irregular screenshots

Detailed explanation of ensuring the consistency of MySQL views (with check option)