Chrome浏览器不能正确加载更新后JavaScript和Css文件原因及解决方法

场景

项目在修改JavaScript和Css文件后，重新启动项目，但浏览器不能正确加载修改后的JavaScript和Css文件，反而显示修改前的文件。

原因

浏览器默认是有缓存的，默认加载缓存中的文件。

解决方法

方法一

调试前清除浏览器缓存，在浏览器设置界面-->设置-->更多工具-->清除浏览数据-->高级设置中。

或使用快捷键直接清理缓存 ctrl+shift+delete。

方法二

设置浏览器不缓存页面。
在调试页面中勾选Disable cache。

方法三

强制刷新页面。
使用ctrl+shift+R 强制刷新，不使用浏览器缓存来刷新页面。

方法四

从代码角度解决缓存问题。
浏览器会缓存css或js文件，通过设置和改变版本号，浏览器就会重新下载新的js或css文件，在js或css后加?v= 版本号的用法如下
css和js带参数（形如.css?v=与.js?v= 或 .css?version=与.js?version= ）
<script type=”text/javascript” src=”jsex.js?version=1.1.6″></script> 
<link rel=’stylesheet’ href=’cssex.css?version=1.3.1′ type=’text/css’ />