"Reprint" web site CSS,JS after the update of the customer browser cache issues, need to refresh to show the correct solution

Original: http://blog.csdn.net/csdn100861/article/details/50684438

Problem Description

The Access Discovery page appears unhealthy after you deploy to the server, but it will appear normal after the refresh.

Problem Analysis

Possible reasons for this are

1. CSS file is too large to load slowly
2. Local cache problem, although the server modifies the CSS file, but the browser still uses the locally cached CSS,

It is obviously unreasonable to need the user to refresh one more time in order to display properly, so how to resolve the update and ask the browser to request a new CSS or JS file?

Solutions Method 1Change the Css/js file name after updating the files.

In fact, to solve this problem is very simple, the cache is tagged with the file name cache content. After you update the content of the Web site's CSS file, change the file name of the CSS. As in the original HTML, the CSS Call statement is as follows:

<link rel="stylesheet" href="style.css" type="text/css"  media="screen"/>

• 1

Change the CSS file name:

<link rel="stylesheet" href="styleV2.css" type="text/css" media="screen"/>

• 1

Method 2Add a version number to the Css/js file

It's a bit of a hassle to modify the CSS file name after every modification of the CSS files, so we can add a version number (i.e. the CSS link) to the loaded CSS statement. As in the original HTML, the CSS Call statement is as follows:

<link rel="stylesheet" href="style.css?v=2015" type="text/css"  media="screen"/>

• 1

Change the version number of the CSS file to a new:

<link rel="stylesheet" href="style.css?v=2016" type="text/css"  media="screen"/>

• 1

about the css/js file suffix parameter:

CSS file after the question mark does not work, only as a suffix, if you use the question mark method, you can add the version number and other information, update can also refresh the browser side of the cache. A small detail can bring us great convenience.
Like what:

<script type="text/javascript" src="homepage.js?version=1.2.6"></script>

• 1

<link rel="stylesheet" href="base.css?version=2.3.3" type="text/css"/>

• 1

Two effects of using parameters:

1. The client will cache CSS or JS files, so each time you upgrade the JS or CSS file, change the version number, the client browser will re-download the new JS or CSS files, play a role in refreshing the cache.

2. The script does not exist, but is dynamically generated by the server, so it has a version number to show the difference. That is, the above code is equivalent to a file:

<script type="text/javascript" src="homepage.js"></script>

• 1

<link rel="stylesheet" href="base.css" type="text/css"/>

• 1

But the browser will think that he is a version of the file!

The first use is the most, may also use two functions simultaneously.

"Reprint" web site CSS,JS after the update of the customer browser cache issues, need to refresh to show the correct solution