务器端优化我们网站的速度时，缓存是最关键的技术之一。

加速站点需要缓存：它不是让服务器为每个请求动态创建HTML输出，而是仅在第一次请求HTML之后创建HTML，缓存它，然后从此开始提供缓存版本，缓存提供更快的响应，并释放服务器中的资源。从服务器端优化我们站点的速度时，缓存是最重要的任务之一。

生成页面的HTML输出时，如果它包含具有用户状态的代码，例如为登录用户打印欢迎消息“Hello {{User name}}！”，则无法缓存该页面。否则，如果有人首先访问该站点，并且缓存了HTML输出，那么所有用户都会受到“Hello！”的欢迎。

因此，缓存插件通常会在用户登录时禁用缓存，如下面的插件WP Super Cache所示：

禁用已登录用户的缓存是不可取的，应该避免使用，因为即使具有用户状态的HTML代码量与页面中的静态内容相比最小，仍然不会缓存任何内容，原因是要缓存的实体是页面，而不是页面中HTML代码的特定部分，因此通过包含一行不能缓存的代码，就不会缓存任何内容，这是一种全有或全无的情况。

通常为了解决这个问题，我们会搭建服务器，以避免在服务器端使用用户状态呈现HTML代码，并在通过API获取所需数据后，仅在客户端呈现它，通过从服务器上呈现的代码中删除用户状态，即使用户已登录，也可以缓存该页面。

​我们也正在探索一种增强网站缓存的方法 ，主要是为了即使在用户登录时也能在网站上启用缓存，策略依赖于仅对那些需要用户状态的页面禁用缓存，以及使用哪些组件可以决定是在客户端还是在服务器端呈现，具体取决于访问用户状态的页面。

最后我们坚信一个网站缓存技术发展，从而提供更快的响应和更好的用户体验。

迎关注我的头条号：Wooola，专注于Java、Golang、微服务架构，致力于每天分享原创文章、快乐编码和开源技术。

前言

最近发版前端项目，用户经常反馈新添加功能在线上环境不好用，常出现新老页面并存的状况。经前端同事排查法发现，实际上只需要重新刷新一下页面就没事了。但是每次去通知用户肯定不现实，所以需要对前端的js和css等文件采取一定的缓存失效的措施，强制浏览器重新去服务器获取新的js代码以及css文件。

楼主经过实际的项目情况反馈，总结以下两点切实可行的办法，分享给大家，希望对大家有帮助。

1. 路径后面加时间戳或者随机数的方式
2. 采用hash（md5）重命名文件

路径后面加时间戳或者随机数的方式

时间版本号

如果每次发布，针对修改过的js或者css文件路径加上时间的版本号，一般以年月日拼写。

<script type="text/javascript" src="lib/common.js?v=20190719"></script>
<link rel="stylesheet" type="text/css" href="assets/css/ie/ie8.css?v=20190719" />

如果发生紧急情况，需要在一天当中对某些css或者js文件多次发版，可以把时间精确到时分秒。

目前楼主主推采用加版本号的方式，因为文件太多，只能做增量修改。好处是没有做任何修改js或者css文件可以不用加版本号。

采用随机数

document.write('<script src=\".lib/common.js?r=' + Math.random() + "\"" + '><\/script>');

一般不建议用随机数的方式，因为每次刷新页面，随机数都会变化，那么浏览器认为一个新的url需要重新请求服务端获取js或css文件，不会在使用浏览器本地缓存。同时占用网络带宽，影响服务器响应速度。

采用hash（md5）重命名文件

可以利用 gulp-rev或者webpack

entry: {
 main: './src/common.js',
 slove: './src/ie8.js'
},
output: {
 filename: '[name].[hash].js',
 path: path.resolve(__dirname, 'dist')
}

例如百度搜索首页，就是利用hash给js和css文件重命名。