js缓存问题,修改js后代码不生效问题

缺陷分析.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的项目需求时,开发和测试要注意此类问题的解决,切记不要因小失大。

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 3,660评论 0 12
  • 为了提升网站的访问速度,需要尽可能的减少客户端与服务器端的请求数量与传输的数据量以及服务器从硬盘或数据库读取内容的...
    木白no1阅读 2,441评论 0 3
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    WhaleFall_丶阅读 523评论 0 4
  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 5,487评论 0 11
  • 持续分享第863天(20190522晴) 今天是一周中最忙碌、充实的一天。 5:30 起床 6:18 去上班 6:...
    松风逸云阅读 119评论 0 1