`

js缓存更新方案

阅读更多
遇到的问题:
        在访问量比较大的系统中,我们需要将一些静态的文件在客户端缓存,以减少下载的流量,从而加快客户端访问的速度。但是缓存会带来一个问题,就是如何在服务端更新完文件之后,客户端能够及时得到更新。
解决思路:
1. 在一个配置文件中维护js文件map;
2. 在页面中通过js map的key来动态加载js文件;
3. 在js文件做出变动之后,只要修改相应js的版本号
实例:
1. 在一个配置文件(config.js)中维护js文件map(注意:config.js是不缓存的,每次更新)
//js Map
var JSHash = {
index: [{url:"http://xxxx.js", version: "1.0"}],
edit:  [{url:"http://xxxx.js", version: "2.0"}]
}

2. 在页面中通过js map的key来动态加载js文件;
<script src=config.js></script>
<script>
loadJS("edit");
</script>
//根据传入的key,动态生成js加载语句
function loadJS(sKey) {
        var node = JSHash[sKey];
        for(var i =0;i < node.length; i ++) {
                document.writeln('<script src="'+node[i].url+'?version='+node[i].version+'"><\/script>');
        }
}
//-->
</script>

             
3. 在js文件做出变动之后,只要修改相应js的版本号即可.这样由于链接不一样了,就会对这个变动的js进行重新下载。其他js由于链接不变,所以仍旧使用缓存中的js.
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    apicloud 缓存方案 js代码

    总结来说,APICloud中的缓存方案主要是通过JavaScript操作Web Storage和IndexedDB,实现JSON数据的本地存储。结合合理的缓存策略,可以显著提升应用的性能和用户体验。在实际项目中,根据需求选择合适的存储方式,并...

    页面缓存处理方案文档,解决前后端页面缓存

    本文档主要讨论了如何处理页面缓存,确保前端逻辑和资源更新后立即生效,无需额外操作。 首先,我们来看前端处理方案。在HTML页面中,缓存主要涉及三部分:页面内容、CSS样式和JS文件。 1. **页面内容缓存控制**:...

    js、css、img等浏览器缓存问题的2种解决方案.docx

    浏览器缓存的意义在于提高了执行效率,但是也随之而来带来了一些问题,例如当服务端修改了 js、css 等文件时,客户端无法更新,这是因为浏览器会将这些文件缓存在本地,以便下次访问时可以快速加载。但是,这也导致...

    本地缓存JSCSS.zip

    综上所述,"本地缓存JSCSS.zip"提供的是一种通过localStorage进行前端资源缓存的技术方案,它有助于提升网页性能,减少HTTP请求,改善用户体验。通过实现和运用这些技巧,开发者可以创建更快速、响应更快的Web应用。

    js浏览器缓存.doc

    - **JavaScript库特性**:尽管Prototype.js本身并未明确设置缓存机制,但由于浏览器默认行为,仍会导致此类问题。 #### 三、解决方案 ##### 3.1 随机参数法 为了解决重复请求失效的问题,可以在每个请求的URL后面...

    利用javascript缓存页面部件

    通过以上讨论,我们可以看到,利用JavaScript缓存页面部件涉及到浏览器的多种本地存储机制和服务工作流,这些工具和策略能显著改善Web应用的性能。在实践中,开发者应根据项目需求选择合适的方法,并不断调整优化,...

    HTML,JSP页面缓存的解决方案

    ### HTML与JSP页面缓存解决方案 在Web开发过程中,页面缓存问题一直是开发者们关注的重点之一。合理的页面缓存管理不仅可以提升用户体验,还可以减轻服务器压力。然而,在某些情况下,如模态窗口中的POSTBACK操作时...

    移动端静态资源缓存方案 - CandyWebCache.pdf

    移动端静态资源缓存方案是针对移动设备应用场景下进行Web内容优化的关键技术。从提供的文件内容来看,文档中涉及的CandyWebCache方案是一个专为移动环境设计的缓存机制,主要目标是提高移动应用和Web服务的性能和...

    浅谈Vue页面级缓存解决方案feb-alive (下)

    Vue.js 是一个流行的JavaScript框架,用于构建交互式的前端界面。在Vue中,`&lt;keep-alive&gt;`是一个内置的组件,可以缓存不活动的组件实例,而不是销毁它们,这样做可以提高性能和用户体验,因为它可以避免重复的组件...

    js缓存系统

    js缓存系统是一种基于JavaScript实现的数据存储解决方案,它可以在客户端(通常是浏览器)上存储数据,以便在后续请求或页面加载时快速访问,避免了不必要的网络请求,从而大大提高了应用的响应速度。这种缓存机制...

    腾讯MT项目:手腾JS资源版本增量更新方案

    标题中的知识点为:“腾讯MT项目:手腾JS资源版本增量更新方案”,这部分内容主要说明了腾讯公司旗下的MT项目,该项目是专注于移动端的开源JavaScript模块管理框架,用于解决JavaScript资源版本更新的问题。...

    C# 系统缓存全解析

    3. 第三方分布式缓存解决方案: 对于大型应用,单一服务器的缓存可能无法满足需求,这时可以引入分布式缓存,如Memcached和Cacheman。它们可以在多台服务器之间共享缓存,提高系统的可伸缩性和性能。 总的来说,C#...

    Node.js-Node.js持久缓存模块支持多种后端存储

    Node.js作为一个强大的JavaScript运行环境,不仅在Web服务器领域广泛应用,还在数据处理和文件操作等方面展现出高效性能。在大型项目中,缓存管理是优化应用程序性能的关键环节,它能减少不必要的数据库查询,提升...

    Laya 用TypeScript写的代码,编译成JavaScript后bundle.js没更新.pdf

    1. **缓存问题**:浏览器可能会缓存旧的bundle.js文件,导致即使代码已经更新,但浏览器仍然加载的是旧的JavaScript代码。解决这个问题的方法是清理浏览器缓存,或者在访问URL后面加上时间戳强制刷新资源。 2. **...

    短小精悍的前端缓存插件解决前端缓存问题

    npm-storage 是一个轻量级的前端存储解决方案,它基于浏览器的本地存储机制(如localStorage或sessionStorage),并提供了一种方便的方式来管理和更新缓存数据。这个插件尤其适合那些需要处理大量静态资源或动态数据...

    【JavaScript源代码】vue keepAlive缓存清除问题案例详解.docx

    在Vue.js应用中,`&lt;keep-alive&gt;`组件是一个非常重要的特性,它允许我们缓存组件的状态,使得组件在切换时能保持之前的状态,提高用户体验。然而,如何精确控制哪些组件应该被缓存,哪些不应该,特别是在不同条件下,...

    缓存技术说明文档.doc

    Ehcache是一款广泛使用的开源Java缓存解决方案,它支持在内存和磁盘上存储数据,并且具有高度可配置性。其主要功能特点包括: - 分布式缓存:Ehcache支持在多节点环境中进行数据共享,提升大型应用的性能。 - 缓存...

    Node.js-一个使用最近最少使用策略的node轻量级快速缓存管理器

    标签中的“Node.js开发-其它杂项”意味着这款缓存管理器可能不是Node.js生态中的主流库,而是属于一些开发者自定义的实用工具或者特定场景下的解决方案。它可能没有广泛的社区支持和文档,但作为“杂项”,它可能是...

    ASP.NET15缓存机制.rar

    ASP.NET 是微软开发的一种用于构建动态 Web 应用程序的技术,它在处理用户请求时,通过高效的缓存机制显著提高了应用程序...同时,结合JavaScript缓存机制,可以实现客户端和服务器端的协同缓存,进一步优化整体性能。

Global site tag (gtag.js) - Google Analytics