tips front-end prevents browsers from caching static resources

The mobile browser uc has always performed well on qq browser and the URL is opened directly on WeChat (the same uses the core of qq browser). A large number of static resources are cached

css js pictures, etc. When these changes occur Refreshing the webpage has no effect at all

There is no problem with computer browsers because some mobile browsers always cache static resources for reasons such as saving traffic and performance. There is no problem in the first place, but this will cause problems for development. It is not suitable. Debugging is fine if this is the case, but it will still have a certain impact on the production environment. For example, when the content of the css file on the server side is changed and the mobile browser does not release the cache, it will cause obvious problems on some pages, so give css js jpg It is necessary to add a timestamp to swf and so on. It is best to change the timestamp whenever the file is modified and let the browser download it. If there is no change, call the file cached by the browser

So it can be like this

<?php $css=&#39;/xxx/xxx.css&#39; ?>
<link rel="stylesheet" type="text/css" href="<?php echo "$css" . &#39;?time=&#39; . filemtime( $css ); ?>" />

Notes:

PHP In principle, '' "" is universal. When the echo function outputs, the content inside " " will be parsed into a pure string, and the variables inside " " will be The value of the variable can be parsed, but the value of the function cannot be parsed. The PHP connector

filemtime("file") will get the last modification time of the file, and get a unix timestamp in a format similar to 1430451431

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

The final output content is like Baidu Cloud’s homepage html source code Here

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

css files can be timestamped like this. Other static resources can also be added by referring to this

. However, during development, you can also do it directly like this to update the timestamp every time.

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

Other languages ​​such as jsp asp can also be easily done

But it cannot be done with javascript. Although you can use it to get the timestamp like this

<script>
var time1=Date.parse(new Date());
var time2=new Date().valueOf();
var time3=new Date().getTime();
console.log('timestamp:'+time1);
console.log('timestamp:'+time2);
console.log('timestamp:'+time3);

/* time1的毫秒部分将是000,不会计算毫秒
 time2,time3会记录精确到毫秒,且结果相同 */
</script>

But it is It is meaningless, even if it is inserted into the reference path on the client side, it is meaningless because the request is sent to the server side. One needs to consider the time of execution and timestamp, and the other is the server-side routing control

under wordpress. You can also refer to this

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

When using grunt as a front-end workflow, you can also use a tool like this

automatic-version-increment

There are many ways, choose the one you like!

Summary: The above is the entire content of this article, I hope it will be helpful to everyone’s study.