Speed up Web Access: How to update the CSS cache

Article Introduction: the version number in the CSS and JS links in HTML.

Background

Search for keywords in search engines. htaccess cache, you can search for a lot of information about setting up Web site file caching tutorial, through the settings can be CSS, JS and other infrequently updated files cached in the browser side, so that visitors each visit your site, Browser can be from the browser's cache to get CSS, JS, and so on, and do not have to read from your server, so to some extent, speed up the opening of the site, but also to save your server traffic.

Problem

Now, here's the problem. htaccess set of CSS, JS Cache has an expiration time, if the visitor's browser has been cached CSS, JS, in these CSS, JS cache does not expire before the browser will only read from the cache CSS and JS, if you modify the server CSS and JS , these changes will not change in the browser of a repeat customer unless a repeat customer presses CTRL + F5 to refresh your Web page or manually empty the browser's cache. A site of thousands of visitors, repeat customers will have a lot, you can not update the CSS after each visitor to refresh the cache it, then this question how will you deal with it?

Treatment methods

1. Change the CSS file name: in fact, to solve this problem is very simple, the cache is through the file name tag cached content. After you have updated the content of the CSS file of the website, you can change the filename of the CSS. As in the original HTML, the CSS call statements are as follows:

<link rel= "stylesheet" href= "Http://www.example.com/style.css" type= "text/css" media= "screen"/>

You can change the CSS file name:

<link rel= "stylesheet" href= "Http://www.example.com/index.css" type= "text/css" media= "screen"/>

Another way to change a CSS file name is to write the version number to the file name, such as:

<link rel= "stylesheet" href= "Http://www.example.com/index.v2011.css" type= "text/css" media= "screen"/>

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

<link rel= "stylesheet" href= "Http://www.example.com/index.v2012.css" type= "text/css" media= "screen"/>

2. Add a version number to the CSS file : In fact, every time you modify the CSS file to modify the file name of the CSS is a bit cumbersome, then we can load the CSS statement to add a version number (that is, the CSS link in the back of the content) can be. As in the original HTML, the CSS call statements are as follows:

<link rel= "stylesheet" href= "http://www.example.com/style.css?v=2011" type= "text/css" media= "screen"/>

Change the CSS file version number to 2012 on it:

<link rel= "stylesheet" href= "http://www.example.com/style.css?v=2012" type= "text/css" media= "screen"/>

Summarize

In fact, the question mark behind the CSS file can not play a practical role, only as a suffix, if the question mark with the method of adding parameters, you can add information such as version number, while you can refresh the browser side of the cache. A small detail that can bring us great convenience.