Clear the cache of CSS, JavaScript, and background images in the browser

In the actual project development process, the page is uploaded to the server. In order to reduce the pressure of the server, so that users load less, the browser will be the picture, CSS, JS cache to the local, so that the next time to visit the site to use. This not only reduces the pressure on the server, but also reduces the number of downloads for the user and gives a better user experience.

However, in the version upgrade or do some CSS, JS and other adjustments, the cache caused the user can not display the updated style, this is another head headache. Unless the user manually upgrade the cache, but almost all users will not be able to access the site to manually clear the cache, because users do not know whether the cache is a problem, and ultimately, the user is thinking that your page is a problem, not normal access.

In order to be able to use the cache normally, and avoid such problems, we can think about it, if we solve this problem?

If changes to the style are not properly accessed, then change the file name of the style? The answer is yes, it will not be verified here. However, it is obviously too cumbersome to manually change the file name each time, can not change the file name? The answer is yes. We may add the version number after the introduced file name, which is different from the previous version (typically the update date). The code is as follows:

<link rel= "stylesheet" type= "Text/css" href= "reset.css?v=20140829" ><script type= "Text/javascript" src= " core.js?v=20140829 "></script>

Can see my CSS file name and JS file name followed by "v=20140829", so do not change the file name and cache, can be updated in real time. and "v=20140829" is only the general habit of writing, can be changed to other.

Finally, the image of the general IMG tag will not be the same name, because it is generated in the background file names. And if it is a fixed file name picture, the same way. For the background map, because the style name changed, the resolution path of the image is the update synchronization, so the background map is also updated.

Clear the cache of CSS, JavaScript, and background images in the browser