Clear the cache of css, javascript and background images in the browser_html/css_WEB-ITnose

During the actual project development process, the page is uploaded to the server. In order to reduce the pressure on the server and allow users to load less, the browser will cache images, css, and js locally so that they can be used the next time they visit the website. This not only reduces the pressure on the server, but also reduces the number of downloads for users, resulting in a better user experience.

However, when upgrading the version or making some adjustments to css, js, etc., the cache prevents users from displaying the updated styles, which is a headache. Unless the user manually upgrades the cache, almost all users will not manually clear the cache in order to access this website normally, because the user does not know whether it is a cache problem. In the final analysis, the user just thinks that there is a problem with your page and cannot access it normally. .

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

If the style cannot be accessed normally after changing it, what about the file name of the changed style? The answer is yes, it will not be verified here. However, it is obviously too troublesome to change the file name manually every time. Can we not 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:

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

You can see that my CSS file name and JS file name are followed by "v=20140829". This can be done without changing the file name. When cached, it can be updated in real time. And "v=20140829" is just a common writing habit and can be changed to something else.

Finally, there are pictures. Generally, pictures with img tags will not have the same name, because they are all file names generated in the background. If it is a fixed file name image, the method is the same as above. As for the background image, since the style name has been changed, the parsing path of the image is naturally updated and synchronized, so the background image is also updated.