Tips front-end prevents the browser from caching static resources, tips static

Tips front-end prevents the browser from caching static resources, tips static

The mobile browser uc has always performed well. The qq browser has opened the website directly (using the qq browser kernel), and a large amount of static resources are cached.

Css js images are ineffective when the page is refreshed due to changes.

Computer browsers are okay, because some mobile browsers always cache static resources for reasons such as low traffic performance, but it is not suitable for debugging if it is okay, but it will still it has a certain impact on the production environment. For example, when the content in the css file on the server has been changed, but the browser on the mobile phone side has never released the cache, it will cause obvious problems on some pages. adding a timestamp to swf and so on is necessary, it is best to change the timestamp so that the browser can download the file whenever the file is modified, and then call the file cached by the browser without modification.

So we can.

1 <?php $css='/xxx/xxx.css' ?>2 <link rel="stylesheet" type="text/css" href="<?php echo "$css" . '?time=' . filemtime( $css ); ?>" />

Note: In principle, php ''" is generic. When the echo function outputs, the content in ''will be parsed as a pure string, "" The variable in will be parsed to the value of the variable, but the value of the function cannot be parsed. is a php Connector

Filemtime ("file") will get the last modification time of the file, and get a unix timestamp similar to 1430451431.

The principle is to change the url of the requested file by adding a suffix, which forces the browser to consider this as a different file to download and update the cache.

The final output content is like in the html source code of Baidu cloud's homepage.

<link href="/ppres/static/css/pcloud_feedpage_all.css?t=201504154611" rel="stylesheet" type="text/css"/>

The css file can be added with a timestamp. For other static resources, see add

However, you can directly update the timestamp each time during development,

<link rel="stylesheet" type="text/css" href="/xx/style.css?time=<?php echo time(); ?> " />

Other languages such as jsp asp can also be easily implemented

However, javascript cannot be used to obtain the timestamp.

1 <script> 2 var time1 = Date. parse (new Date (); 3 var time2 = new Date (). valueOf (); 4 var time3 = new Date (). getTime (); 5 console. log ('timestamp': '+ time1); 6 console. log ('timestamp': '+ time2); 7 console. log ('timestamp: '+ time3); 8 9/* the millisecond part of time1 will be 000, and 10 time2 will not be calculated. time3 will record accurate to milliseconds, and the results are the same */11 </script>

But it is meaningless, it does not make sense even if the client is inserted into the reference path. Because the request is sent to the server, you need to consider executing the timestamp and the server-side route control.

You can also refer to this method in wordpress.

From winy: http://www.hilau.com/1311273.html/or/http://www.laozhuhome.com/html/automatically-version-your-css-and-javascript-files

This tool can be used when grunt is used as a front-end workflow.

Automatic-version-increment

There are many ways to choose your preferred one!