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

Detailed explanation of three ways to wrap text in el-table header

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

Detailed explanation of three ways to wrap text in el-table header

Two-hour introductory Docker tutorial

HTML+CSS+JavaScript realizes the display of selected effect following the mouse movement

How to add indexes to MySQL

Introduction to install method in Vue

Detailed explanation of the knowledge points of using TEXT/BLOB types in MySQL

How to use Docker to build a pypi private repository

CSS to achieve chat bubble effect

React useMemo and useCallback usage scenarios

How to add a paging navigation bar to the page through Element UI

Recommend

Three Discussions on Iframe Adaptive Height Code

Introduction to JavaScript conditional access attributes and arrow functions

Detailed explanation of daily_routine example code in Linux

Detailed explanation of MySQL semi-synchronization

Vue calculated property implementation transcript

Native JS to implement login box email prompt

How to solve the problem of forgetting the root password of Mysql on Mac

The reason why MySQL manually registers the binlog file and causes master-slave abnormalities

Tips for adding favicon to a website: a small icon in front of the URL

Navicat for MySql Visual Import CSV File

jQuery implements sliding tab

About the bug of better-scroll plug-in that cannot slide (solved by plug-in in 2021)

MySQL practical window function SQL analysis class students' test scores and living expenses

How to remove the dividing line of a web page table

Detailed explanation of the correct use of the if function in MySQL