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

简介:   我们的用户量大,修改js文件后,用户反馈登录出现问题。实际上刷新一下就没事了。就是因为用户的浏览器使用的还是本地缓存的js代码。   强制刷新一般就会重新去服务器获取新的js代码。但不能让用户每次都这样子去做。
 
 
我们的用户量大,修改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>

 

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

 

如下:

 

 

 

 

 

 15年8月12日补充:

 

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

 

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

 

 

 

进一步思考:

 

这种加时间方法是可行。。不是系统生成的时间,不是所有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文件,保留原来的值不动即可

 

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

目录
相关文章
|
2月前
|
缓存 JavaScript 前端开发
Java 如何确保 JS 不被缓存
【10月更文挑战第19天】在 Java 中,可以通过设置 HTTP 响应头来确保 JavaScript 文件不被浏览器缓存。方法包括:1. 使用 Servlet 设置响应头,通过 `doGet` 方法设置 `Expires`、`Cache-Control` 和 `Pragma` 头;2. 在 Spring Boot 中配置拦截器,通过 `NoCacheInterceptor` 类和 `WebConfig` 配置类实现相同功能。这两种方法都能确保每次请求都能获取到最新的 JavaScript 内容。
|
1月前
|
移动开发 JavaScript 前端开发
一些处理浏览器兼容性问题的JavaScript库
这些库在处理浏览器兼容性问题方面都有着各自的特点和优势,可以根据具体的需求和项目情况选择合适的库来使用,从而提高代码的兼容性和稳定性,为用户提供更好的体验。同时,随着浏览器技术的不断发展,还需要持续关注和学习新的兼容性解决方案。
109 48
|
1月前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
1月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
|
1月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
40 1
|
1月前
|
Web App开发 缓存 安全
WIN11 Chrome 双击打不开闪退及Chrome浏览器不能拖拽文件crx
【11月更文挑战第6天】本文介绍了 WIN11 系统中 Chrome 浏览器双击打不开闪退及不能拖拽文件 crx 的原因和解决方法。包括浏览器版本过旧、扩展程序冲突、硬件加速问题、缓存过多、安全软件冲突、系统文件损坏、用户配置文件损坏等问题的解决方案,以及 crx 文件的屏蔽、权限问题和文件格式问题的处理方法。
140 2
|
1月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
329 9
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
148 1
|
2月前
|
SQL 缓存 Java
JVM知识体系学习三:class文件初始化过程、硬件层数据一致性(硬件层)、缓存行、指令乱序执行问题、如何保证不乱序(volatile等)
这篇文章详细介绍了JVM中类文件的初始化过程、硬件层面的数据一致性问题、缓存行和伪共享、指令乱序执行问题,以及如何通过`volatile`关键字和`synchronized`关键字来保证数据的有序性和可见性。
38 3
|
2月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
173 0