缺陷分析.png

问题描述

在上线新版本sdk的时候，发现有的用户的操作还是调用的老版本JS里面的内容，这样就造成原来新的JS里面加上的限制不能限制用户的操作，从而导致用户无法使用新版功能。

问题产生原因

如果在用户之前已经访问过系统，那么浏览器中会缓存该系统的CSS、JS，这些CSS、JS缓存未过期之前，浏览器只会从缓存中读取CSS和JS，如果在服务器上修改了css和js，那么这些修改在用户的浏览器中是不会有变化的。

解决方案

解决方式一：

用户按Ctrl + F5强制刷新页面或者手动清空了浏览器的缓存。此时浏览器会重新向服务器获取CSS和JS文件,新的文件便会生效。

解决方式二：

当然我们不可能要求每个客户都做清理缓存的操作，于是便从代码的角度着手解决这个问题。在js后面添加版本号，让浏览器把这个JS文件当做新的文件重新向服务器获取资源。

加版本号之前：

<pre style="margin: 10px 0px 0px; padding: 0px; font-family: ConfluenceInstalledFont, monospace; color: rgb(51, 51, 51); font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;"><script type="text/javascript" th:src="@{/js/test/index.js}"></script></pre>

加版本号之后：

<pre style="margin: 10px 0px 0px; padding: 0px; font-family: ConfluenceInstalledFont, monospace; color: rgb(51, 51, 51); font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;"><script type="text/javascript" th:src="@{/js/test/index.js?v=1.0}"></script></pre>

此时问题解决，CSS与上类似。

但是针对To B的这种业务模式，客户嵌入的js-sdk不能随意更改名字，因此引申出第三种方法

解决方式三：

<script type="text/javascript" src="/js/common.js?t={{date("Y-m-d")}}" ></script>

使用日期，重新请求服务器。

<script type="text/javascript" src="/js/common.js?t={{time()}}" ></script> 使用时间戳
<script type="text/javascript" >loadJs("http://localhost:8081/static/html/convention.js.js?timestamp="+Math.random(),null);</script>

总结

在遇到诸如更新js的项目需求时，开发和测试要注意此类问题的解决，切记不要因小失大。