How to update css and js links in cached HTML

Beijing website construction Company Shangpin China: Search for the keyword. htaccess cache in the search engine. You can find many tutorials about setting up website file cache. By setting, you can cache files that are not updated frequently, such as css and js, on the browser side, so that visitors can visit your Website production The browser can get css, js, etc. from the browser's cache without having to read from your server, which speeds up the opening of the website to a certain extent and saves your server traffic.

Now comes the problem. The css and js caches set by. htaccess have an expiration time. If the css and js have been cached in the visitor's browser, the browser will only read the css and js from the cache before these css and js caches expire. If you modify the css and js on the server, these changes will not change in the returning visitor's browser, Unless repeat customers press Ctrl+F5 to refresh your website page or manually clear the browser cache. There are thousands of visitors to a website, and there will be many repeat visitors. You can't let every visitor refresh the cache after updating the css. How will you deal with this problem?

Treatment

1. Add a version number to the css file: In fact, it is a bit troublesome to change the file name of the css file after each modification of the css file. Then we can add a version number (that is, the content behind the "" in the css link) to the load css statement. For example, the css call statement in the original html is as follows:

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

Change the version number of the css file to 2012:

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

2. Change the css file name: In fact, it is very simple to solve this problem. The cache marks the cache content through the file name. After you update the content of the website's css file, you can change the name of the css file. For example, the css call statement in the original html is as follows:

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

Just change the name of the css file:

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

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

<link rel="stylesheet" href=" //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=" //www.example.com/index.v2012.css " type="text/css" media="screen"/>

In fact, the question mark behind the css file 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 side cache. A small detail can bring us great convenience.

This article was published on Beijing website production Company Shangpin China //ihucc.com/

Date：2013-02-16 Source: Shangpin China Type: website encyclopedia
Word Size： small medium big

+86 10-60259772