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

网上找的关于js缓存的问题,由于大多数用户不知道 Ctrl + F5,这一对web开发者来说就像吃饭一样的快捷键,所以感觉这篇文章还是很有可借鉴性的。类似的所有静态资源,其实都可以采用这种方式啊。。。。

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

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

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

于是我思考一个问题:

如果修改了js文件中的js代码,发布代码到线上后。用户的浏览器使用的还是原来js缓存。所以并不会马上生效。

如何才能让浏览器使用最新的js文件呢?

很多人想到的第一反应是,在在后面加一个时间戳来解决。这样url地址每次变化,浏览器就会请求服务端的js,而不会使用缓存。 这样是解决了。但是会导致浏览器每次都要去请求服务端的js文件。占用带宽。作为技术,能不能有种更好的办法呢?既能避免用户的浏览器每次去请求服务端获取js文件。又能在发布新的js代码后,能够使用最新的js文件? 据说,在问号后面加版本号,现在很多网站都这么干。加个版本号能够解决问题吗? 加个版本号,js有个版本。如果每次发布新的js代码。后面就会附加新的版本号。然后用户加载html页面的时候。版本号附加在在

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

现在疑问是,js的版本号如何生成呢?

生成一个日期吗?

当天的日期比较好。

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

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

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

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

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

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

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

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

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

今天和明天的值不同了,重新请求服务器。使用时间戳,每刷新一次html,值都不同。随机数也是一样的

不推荐使用这种方式。

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

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

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

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

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

如下:

我去看了一下淘宝,发现也是这样一种方式额,不知道对不对? 如下: 15年8月12日补充: 公司有好几千万注册会员,于是第三方应用使用我们网站会员帐号实现在第三方网站登录,需要设计oauth2.0授权的平台,于是需要参考微博的oauth体制。 无意中发现他们的css也是使用年月日来控制 进一步思考: 这种加时间方法是可行。。不是系统生成的时间,不是所有js文件都加。 是不是可以进一步考虑一种办法,用程序来进行开关呢? 自己勾选。如果这个文件修改了。那么就设置为更新。模版中判断,就根据这个开关,把时间戳自动打上去? 不过这样子觉得没必要。因为还没到那么重大。其实初期,完全可以程序手动把日期打上去即可了。 该了什么js文件,就给哪个js文件加,这样已经是折衷了。就跟改代码一样。代码都要修改的,这点改也没多少工作量。 总结思路: js文件的内容修改了,可以加个t参数表明一下日期,用这个日期来作为版本号,看到日期也能知道是哪天发布的。 没有修改js文件根本就不用修改日期。 实践:

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

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

文章来源:http://www.cnblogs.com/wangtao_20/p/4589898.html

作者: 二皮

Hackers please go away