Original source: http://blog.csdn.net/csdn100861/article/details/50684438
Problem Description
Recently, the company's official website style has been adjusted, deployed to the server after the access found page display is not normal, but after the refresh will show normal. Problem Analysis
After the study found that the possible reasons for the CSS file is too large, loading slow local cache problem, although the server modified the CSS file, but the browser still uses the locally cached CSS,
Need users to refresh the normal display is obviously very unreasonable, then how to solve the update after the browser to request a new CSS or JS file. Solutions Method 1 Change the Css/js file name after updating the file.
In fact, the solution to this problem is very simple, the cache is to mark the contents of the cache by file name. 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= "Style.css" type= "text/css" media= "screen"/>
1 1
Change the CSS file name:
<link rel= "stylesheet" href= "Stylev2.css" type= "text/css" media= "screen"/>
1 1
Method 2 Add a version number to the Css/js file
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) on it. As in the original HTML, the CSS call statements are as follows:
<link rel= "stylesheet" href= "style.css?v=2015" type= "text/css" media= "screen"/>
1 1
To change the version number of a CSS file to a new:
<link rel= "stylesheet" href= "style.css?v=2016" type= "text/css" media= "screen"/>
1 1
about the css/js file suffix parameter:
CSS file after the question mark can not play a practical role, only as a suffix, if the question mark with the method of adding parameters, you can add the version number and other information, updates can refresh the browser side of the cache. A small detail that can bring us great convenience.
Like what:
<script type= "Text/javascript" src= "homepage.js?version=1.2.6" ></script>
1 1
<link rel= "stylesheet" href= "base.css?version=2.3.3" type= "Text/css"/>
1 1
Two functions of using parameters:
The client caches CSS or JS files, so each time you upgrade the JS or CSS file, change the version number, the client browser will download the new JS or CSS files, play a role in refreshing the cache.
The script does not exist, but it is dynamically generated by the server, so there is a version number to differentiate. That is, the code above is equivalent to a file:
<script type= "Text/javascript" src= "Homepage.js" ></script>
1 1
<link rel= "stylesheet" href= "Base.css" type= "Text/css"/>
1 1
But the browser will consider him to be a version of the file.
The first use is the most, and it is possible to use both.