Version numbers in css and js links in HTML (refresh cache)

background
Search the keyword .htaccess cache in the search engine, and you can find many tutorials on setting up website file cache. By setting up, you can cache CSS, JS and other files that are not updated frequently on the browser side, so that every time a visitor visits your website, the browser can get CSS, JS, etc. from the browser cache instead of reading from your server. This speeds up the opening of the website to a certain extent and saves your server traffic.

question
Now the problem comes. The css and js caches set by .htaccess have an expiration time. If css and js have been cached in the visitor's browser, the browser will only read css and js from the cache before these css and js caches expire. If you modify css and js on the server, then these changes will not change in the browser of returning customers, unless the returning customer presses Ctrl + F5 to refresh your website page or manually clears the browser cache. A website has tens of thousands of visitors, many of whom are repeat visitors. You can’t ask every visitor to refresh the cache after updating the CSS. So how would you deal with this problem?

Method 1

Change the css file name: In fact, the solution to this problem is very simple. The cache marks the cached content through the file name. After you update the CSS file content of the website, just change the CSS file name. For example, the css call statement in the original html is as follows:

Just change the css file name:

Another way to change the css file name is to write the version number into the file name, such as:

After the css file is updated, just change the version number in the file name:

Method 2
Add a version number to the CSS file: In fact, it is a bit troublesome to modify the CSS file name every time the CSS file is modified. Then we can add a version number in the loading CSS statement (that is, the content after ? in the CSS link). For example, the css call statement in the original html is as follows:

Just change the version number of the css file to 2012:

It should be noted that some proxy cache servers will not cache resources containing "?" in the URL, so method 2 may cause your original cache function to fail. You can use method 1 instead.

Summarize

In fact, the question mark after the css file has no practical effect and can only be used as a suffix. If you use the question mark plus parameter method, you can add version number and other information, and refresh the browser cache at the same time. A small detail can bring us great convenience.