js文件被浏览器缓存的思考

矫情吗；* 2022-07-15 10:41 240阅读 0赞

#     #

我们的用户量大，修改js文件后，用户反馈登录出现问题。实际上刷新一下就没事了。就是因为用户的浏览器使用的还是本地缓存的js代码。

强制刷新一般就会重新去服务器获取新的js代码。但不能让用户每次都这样子去做。

于是我思考一个问题：  
  
如果修改了js文件中的js代码，发布代码到线上后。用户的浏览器使用的还是原来js缓存。所以并不会马上生效。  
  
  
如何才能让浏览器使用最新的js文件呢？  
  
很多人想到的第一反应是，在<script type="text/javascript" src="/js/common.js" ></script>在后面加一个时间戳来解决。这样url地址每次变化，浏览器就会请求服务端的js，而不会使用缓存。  
  
这样是解决了。但是会导致浏览器每次都要去请求服务端的js文件。占用带宽。作为技术，能不能有种更好的办法呢？既能避免用户的浏览器每次去请求服务端获取js文件。又能在发布新的js代码后，能够使用最新的js文件？  
  
据说，在问号后面加版本号，现在很多网站都这么干。加个版本号能够解决问题吗？

加个版本号，js有个版本。如果每次发布新的js代码。后面就会附加新的版本号。然后用户加载html页面的时候。版本号附加在在

<script type="text/javascript" src="/js/common.js?v=99" ></script>

如果没有修改，那么版本号还是原来的，这样做到了：不发布代码的时候，浏览器使用的是本地缓存。因为版本号没有变化。

现在疑问是，js的版本号如何生成呢？

生成一个日期吗?

当天的日期比较好。

这样的确解决了问题。让用户可以使用。

只不过出现一个新的问题来临了。

js文件加上当天的发布日期作为版本号即可了。

有些人针对url后面带时间戳的做法，会导致浏览器每次请求都不会缓存，因为每次请求时间都会变化，url就变化了，于是浏览器认为是一个新的地址了。

有人针对这个问题的解决办法是： 这里URI不是静态，可能会造成某些浏览器不会进行缓存，可以采用伪静态配合URL重写来解决

网上查询资料，纵观大家的解决思路总结如下：

1、修改js的文件名。我觉得这样很麻烦。造成版本系统的维护困难。不建议。除非是完全ftp。不过每次发布都修改文件名称。的确造成维护的时候很茫然，接手的人看到文件名称变化，会比较难维护

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

一般都是在html模版中使用一个时间戳或者随机数函数生成一个值。

<script type="text/javascript" src="\{ \{passport\_host\}\}js/common.js?t=\{ \{date("Y-m-d")\}\}" ></script> 今天和明天的值不同了，重新请求服务器。

<script type="text/javascript" src="\{ \{passport\_host\}\}js/common.js?t=\{ \{time()\}\}" ></script> 使用时间戳，每刷新一次html，值都不同。随机数也是一样的

不推荐使用这种方式。

因为这样的方式导致的问题是，每次刷新html，时间戳都是变化的，url就总是唯一的，于是浏览器总是去请求服务端获取js文件，不会使用浏览器本地的缓存。占用带宽,影响速度

3、路径后面加js的版本号。这样是业界比较成熟的做法。

关键是这个版本号，怎么做版本？ 难道真的纳入版本系统里面去？不是的。我突然灵感来，想到一种程序员自己控制的办法。

自己主动加时间，如果本次发布，修改了哪几个js文件。那么就在后面加上一个时间点：年月日

如果一天会发布多次对js文件的修改，那么程序员还要精确点。年月日时分秒即可。

如下：

<script type="text/javascript" src="/js/common.js?time=20150518" ></script>

我去看了一下淘宝，发现也是这样一种方式额，不知道对不对？

如下：

![Image 1][]

![Image 1][]

15年8月12日补充：

公司有好几千万注册会员，于是第三方应用使用我们网站会员帐号实现在第三方网站登录，需要设计oauth2.0授权的平台，于是需要参考微博的oauth体制。

无意中发现他们的css也是使用年月日来控制

![Image 1][]

进一步思考：

这种加时间方法是可行。。不是系统生成的时间，不是所有js文件都加。

是不是可以进一步考虑一种办法，用程序来进行开关呢？

自己勾选。如果这个文件修改了。那么就设置为更新。模版中判断，就根据这个开关，把时间戳自动打上去？

不过这样子觉得没必要。因为还没到那么重大。其实初期，完全可以程序手动把日期打上去即可了。

该了什么js文件，就给哪个js文件加，这样已经是折衷了。就跟改代码一样。代码都要修改的，这点改也没多少工作量。

总结思路：

js文件的内容修改了,可以加个t参数表明一下日期,用这个日期来作为版本号，看到日期也能知道是哪天发布的。

没有修改js文件根本就不用修改日期。

实践：  
  
         <script type="text/javascript" src="\{ \{passport\_host\}\}js/common.js?t=20150622" ></script>

如果下一次修改了这个js文件，那么发布的时候，就修改日期

<script type="text/javascript" src="\{ \{passport\_host\}\}js/common.js?t=20150628" ></script>

没有修改的js文件，保留原来的值不动即可。

思考：这样子是不是很麻烦，有更好的方式吗。目前我没想到更好的办法了。这种方式凑合能用。既能够按需修改，也能够保证浏览器使用缓存。达到了折衷和平衡。

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读

相关如何删除ie浏览器缓存文件、缓存js

当使用ie浏览器访问服务器时，每次修改js升级后都可能会出现调用方法报错，原因是因为电脑本地有旧的js缓存文件，而使用以下这种方式往往不会生效 > ![在这里插入图...

Love The Way You Lie/ 2024年04月17日 17:41/ 0 赞/ 107 阅读

相关 js代码更新浏览器缓存问题

代码更新之后，浏览器打开页面发现代码还是之前的解决办法：在加载js时 url后边拼接上当前时间戳 <script type='text/javascrip

迈不过友情╰/ 2023年02月27日 05:51/ 0 赞/ 37 阅读

相关 js 清除浏览器缓存方法

转载自 [http://www.haorooms.com/post/js\_llq\_hc][http_www.haorooms.com_post_js_llq_hc] 写的

港控/mmm°/ 2022年09月27日 13:28/ 0 赞/ 319 阅读

相关 JS 清除浏览器缓存（转）

关于浏览器缓存浏览器缓存，有时候我们需要他，因为他可以提高网站性能和浏览器速度，提高网站性能。但是有时候我们又不得不清除缓存，因为缓存可能误事，出现一些错误的数

布满荆棘的人生/ 2022年08月21日 06:41/ 0 赞/ 341 阅读

相关 js文件被浏览器缓存的思考

我们的用户量大，修改js文件后，用户反馈登录出现问题。实际上刷新一下就没事了。就是因为用户的浏览器使用的还是本地缓存的js代码。强制刷新一般就会重新去服

矫情吗；*/ 2022年07月15日 10:41/ 0 赞/ 241 阅读

相关 Web 解决浏览器缓存js，css等静态文件的方法

方法一：生成随机数字 <script src="xxx.js?randomId=<%=Math.random()%>" type="text/javascript

快来打我*/ 2022年06月13日 23:38/ 0 赞/ 689 阅读

相关解决js文件被浏览器缓存问题

1、加版本号<script type="text/javascript" src="/js/common.js?v=1" ></script> 2、加发布时间<script

妖狐艹你老母/ 2022年05月26日 07:21/ 0 赞/ 408 阅读

相关 Node.js-浏览器端缓存

例子： const http = require('http'); const fs = require('fs'); // 创建服务 con

悠悠/ 2022年04月02日 12:26/ 0 赞/ 378 阅读

相关 JS如何阻止浏览器缓存

缓存的工作机制：根据URL进行缓存，对同一个地址读取一次。所以阻止缓存的方法可以是改变URL 只要每次访问的路径不通即可具体如下： 'url?t='+new Date

╰半夏微凉°/ 2022年03月16日 12:08/ 0 赞/ 614 阅读

相关修改css及js文件后无法刷新浏览器的css及js缓存

解决办法：在文件路径最后加“?参数=值”，参数和值可随意设置，保存后刷新页面即可。原因是将修改后的文件当成新文件重新加载了。 <link type="text/

绝地灬酷狼/ 2022年02月24日 04:26/ 0 赞/ 235 阅读