Reference JS and CSS in HTML and set the version number

Background

Search for keywords in a search engine. Htaccess CacheYou can find a lot of tutorials on setting website File Cache. By setting, you can cache infrequently updated files such as CSS and JS on the browser, in this way, every time a visitor accesses your website, the browser can obtain CSS and JS from the browser's cache without reading from your server, in this way, the website opening speed is accelerated to a certain extent, and the traffic on your servers can be saved.

Problem

Now the question is ,. the CSS and JS cache set by htaccess have an expiration time. If CSS and JS are cached in the visitor's browser, before these CSS and JS caches expire, the browser only reads CSS and JS from the cache. If you modify CSS and JS on the server, these changes will not change in the browser of regular customers, unless you press Ctrl + F5 to refresh your website page or manually clear the browser cache. There are tens of thousands of visitors to a website, and there will also be many regular visitors. You cannot refresh the cache for every visitor after updating CSS. What do you do with this problem?

Method 1

Change the CSS file name: in fact, it is very easy to solve this problem. The cache uses the file name to mark the cached content. After you update the CSS file content of the website, you can change the CSS file name. For example, the original css call statement in HTML is as follows:

1	<Linkrel = "stylesheet" href = "style.css" type = "text/CSS" Media = "screen"/>

You can change the CSS file name:

1	<Linkrel = "stylesheet" href = "index.css" type = "text/CSS" Media = "screen"/>

Another way to change the CSS file name is to write the version number to the file name, for example:

1	<Linkrel = "stylesheet" href = "index.v2011.css" type = "text/CSS" Media = "screen"/>

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

1	<Linkrel = "stylesheet" href = "index.v2012.css" type = "text/CSS" Media = "screen"/>

Method 2

Adding a version number to the CSS file: in fact, it is a bit difficult to modify the CSS file name after each CSS file modification, so we can add a version number (that is, in the CSS link? . For example, the original css call statement in HTML is as follows:

1	<Linkrel = "stylesheet" href = "style.css? V = 2011 "type =" text/CSS "Media =" screen "/>

Change the version number of the CSS file to 2012:

1	<Linkrel = "stylesheet" href = "style.css? V = 2012 "type =" text/CSS "Media =" screen "/>

Note that some proxy cache servers do not include "? ", So method 2 may cause your original cache function to fail. You can use the first method instead.

Summary

In fact, the question mark after the CSS file does not actually play a role. It can only be used as a suffix. If the question mark is used to add parameters, you can add version numbers and other information, and refresh the browser cache. A small detail can bring us great convenience.