Tips Front End blocks browser from caching static resources

Mobile browser UC has been a good performance QQ browser and the Web address directly open (as in the case of QQ browser kernel) cache a lot of static resources

CSS JS pictures and so on when the changes have been made to refresh the page has no effect

There is no problem with the computer-side browser because some mobile browsers will always cache static resources due to the traffic performance and so on. But this is going to be a problem for development. Not suitable for debugging if it's just so good, but it still has a certain impact on the production environment, such as when the server side of the CSS file content has changed Mobile browser has not released the cache will cause some obvious problems on the page, so to CSS JS jpg swf, such as the timestamp is necessary, preferably whenever the file has changed the time stamp to allow the browser to download, and no changes to invoke the browser cache files

So I can do this.

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

Note:php in principle, "" "is generic, the Echo function output when the content will be parsed into a pure string," "in the variable will be parsed the value of the variable, but the value of the function cannot be resolved. is a PHP connector

Filemtime ("file") will get the file last modified time to get a Unix timestamp similar to the 1430451431 format

The principle is to change the URL of the requested file by adding a suffix, forcing the browser to think that this is a different file to download the update cache

The final output of the content is like the Baidu Cloud homepage HTML source code in this way

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

CSS files can be timestamp this way, and other static resources can also refer to this

However, the development can also be done directly so that it updates the timestamp each time,

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

Other languages such as JSP ASP can also easily do

But you can't do it with JavaScript, though you can use it to get time stamps.

1<script>2 varTime1=date.parse (NewDate ());3 varTime2=NewDate (). ValueOf ();4 vartime3=NewDate (). GetTime ();5Console.log (' timestamp: ' +time1);6Console.log (' timestamp: ' +time2);7Console.log (' timestamp: ' +time3);8 9 /*The millisecond portion of the time1 will be 000 and will not count millisecondsTen The Time2,time3 is recorded exactly in milliseconds and the result is the same*/ One</script>

However, it is meaningless, even if the client is plugged into the reference path because the request is made to the server, one is to take into account that the time stamp is performed on a server-side routing control

WordPress can also be referenced under this

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

Using grunt as a front-end workflow, you can use such a tool

Automatic-version-increment

Many ways, choose to enjoy it!

Tips Front End blocks browser from caching static resources