`

如何提升Web应用程序性能---JS缓存

 
阅读更多

如何提升Web应用程序性能,是我们经常要面对的一个问题,
其中服务器端方面的改善,这里先不道来。
对于客户端性能改善,
核心就是,减少请求数,
怎么样减少请求数,
1,JS文件尽量少,
2,Image尽量少,
3.CSS等其他资源请求尽可能少。
但是,对于已有的Web应用程序来说,我们无法做到减少图片,
但是我们能合并JS文件和CSS文件,以达到个数减少的目的,
同时,我们可以开启客户端缓存,
按道理默认来说,JS,Image,CSS等,这些会自动在服务器被缓存,

服务器端的缓存方式:
①客户端发送请求给服务器,询问是否缓存未过期
②如果已过期,服务器发送这个资源给客户端
  如果未过期,服务器发送一个304的状态码,标志缓存有效,客户端从本地Load

客户端缓存的方式:
客户端将首先判断客户端本地缓存是否有效,如果有效,将直接从地Load
从而不必发送请求给服务器确认。

从以上缓存的工作方式来看,
服务器端缓存并不能减少请求数,只是说能减少传输量。

所以,客户端缓存,在实际应用中,还是很有效的。
但是,客户端缓存带来的一个问题是,当我应用程序更新了某个文件,需要重新发布时,
那么因为缓存的存在,被更新的JS或者CSS文件将无法被重新Load,而失效。

解决的方法很简单,
我们修改该资源的URL即可,如改文件名。

<script src="common.js"></script>
     修改后  v1.1版本:
 <script src="common.js"></script>
 <script src="foo.js"></script>

 

新增加了一个foo.js  同时,也改动了common.js , 在common.js 中定义了新的类,并在foo.js 中使用了common.js. 

在这种情况下如果以前用户浏览过 1.0版本的 html 文件,那么他的浏览器自动缓存了 common.js
当他浏览新版本的时候,因为使用的是 v1.1的 foo.js 和 v1.0的 common.js ,这样将导致脚本出错。
解决方法探讨:
  因为css,js 是通过 <script src=....> 这种方式加载的,所以,很难使用 asp 的那种服务器端禁止缓存的办法。也很难使用ajax的通过设置 http请求头的办法禁止使用缓存。

看来随机数是个好办法。

//方法一:
document.write("<script src='test.js?rnd="+Math.random()+"'></s"+"cript>")

//方法二:
var js=document.createElement("script")
js.src="test.js"+Math.random()
document.body.appendChild(js)

 

但是,如果采用随机数的话, js文件将永远得不到缓存,每次都必须重新从服务器加载,即使没有任何更改。
大家如果经常上国外网站的话,可以看到他们通常采用这样的方式来解决:
<script src="test.js?ver=113"></script>
其中 ver=113 的 113就是版本号,一般都是采用 CVS 或其他工具生成的开发版本号。

这样真正做到了应该缓存的时候缓存静态文件,当版本有更新的时候从获取最新的版本,并更新缓存。
对于图像 <img src="test.jps?ver=在CVS的版本号"> 来有效利用和更新缓存.

分享到:
评论

相关推荐

    Web应用程序设计-张顺淼-计算机0201、0202-46课时-6.20MB

    《Web应用程序设计》课程是针对计算机0201和0202班设计的一门实践性强、理论与技术相结合的专业课程,由知名讲师张顺淼主讲,共计46课时,课程资料大小为6.20MB。这门课程旨在帮助学生掌握Web应用程序开发的核心技术...

    Node.js-Sapper一个构建高性能通用Web应用程序的框架

    **Node.js-Sapper:构建高性能通用Web应用程序的框架** Node.js是基于Chrome V8引擎的JavaScript运行环境,它以其异步非阻塞I/O模型在服务器端编程领域中独树一帜,使得开发者可以用JavaScript来编写后端代码。...

    Web程序设计-ASP.NET使用网站开发源代码

    ASP.NET是微软公司推出的一种强大的Web应用程序开发框架,它基于.NET Framework,为开发者提供了构建动态、数据驱动的Web应用程序的强大工具和API。本资源包含了《Web程序设计-ASP.NET 使用网站开发》第二版的源代码...

    Vue应用程序开发-ppt-更新.rar

    这份“Vue应用程序开发-ppt-更新”资料可能是关于如何使用Vue.js进行应用程序开发的一份PPT教程,包含最新的更新内容。下面我们将深入探讨Vue.js的核心概念、特性以及开发流程。 1. **Vue核心概念**: - **虚拟DOM...

    基于WEB程序设计基础-浙江大学(17)

    12. 最新Web技术:了解前沿技术,如WebAssembly、Web Components、Service Worker等,以及如何利用它们提升Web应用的性能和功能。 总的来说,"基于WEB程序设计基础-浙江大学(17)"这门课程将为学生提供全方位的Web...

    react-一个基于17kbPreactRedux的渐进式Web应用程序

    标题 "react-一个基于17kbPreactRedux的渐进式Web应用程序" 暗示了这个项目是关于使用轻量级的Preact库和Redux状态管理器来构建一个渐进式Web应用程序(Progressive Web App,简称PWA)。Preact是一个与React高度...

    基于VB.NET的Web应用程序设计

    【标题】"基于VB.NET的Web应用程序设计"涵盖了在Microsoft .NET Framework环境下使用Visual Basic .NET(VB.NET)开发Web应用程序的关键技术与实践。VB.NET是.NET Framework的一部分,它为Web开发提供了强大的工具和...

    基于WEB程序设计基础-浙江大学(6)

    【标题】"基于WEB程序设计基础-浙江大学(6)"涵盖了Web开发的核心概念和技术,这是浙江大学开设的一门课程,旨在帮助学生掌握构建Web应用程序的基础。在第六部分的学习中,重点可能会聚焦于更高级的主题,例如动态...

    前端开源库-web-app-manifest-loader

    "web-app-manifest-loader" 是一个专门针对Web应用程序清单(Web App Manifest)处理的前端开源库。本文将深入探讨这个库的核心功能、用途以及它如何融入Web开发流程。 Web应用程序清单(Web App Manifest)是一种...

    ASP.NETWeb应用程序设计教程相关资源

    ASP.NET是微软公司开发的一种用于构建Web应用程序的框架,它基于.NET Framework,为开发者提供了丰富的功能和工具,简化了Web应用的开发流程。本教程相关的资源涵盖了ASP.NET Web应用程序设计的多个方面,包括基础...

    编写优秀的高性能WEB应用程序的外文及其翻译

    【描述】:本文主要探讨了编写高性能Web应用程序的技巧,旨在帮助开发者提升Web应用的性能。 【标签】:外文翻译,Web开发,性能优化 【正文】: 在Web开发领域,创建高性能的应用程序至关重要,因为它直接影响...

    改善Web2.0应用程序的性能[归纳].pdf

    总结来说,改善Web 2.0应用程序性能的关键在于理解其性能瓶颈,充分利用浏览器缓存机制,并根据各种HTTP缓存规则进行精细化配置。开发人员应当考虑网络环境的多样性,为不同条件下的用户优化体验。只有这样,才能...

    java web高级编程--英文高清版

    根据提供的文件信息,我们可以推断出这是一本关于Java Web应用程序的专业书籍,作者为Nicholas S. Williams,并由John Wiley & Sons, Inc.出版。本书的全称是《Professional Java® for Web Applications》。虽然...

    基础-Web应用的性能优化思路——找到瓶颈【转】.pdf

    Web应用性能优化是一个复杂而重要的任务,旨在提升用户体验和服务器效率。本文主要关注找到性能瓶颈并提出相应的优化策略。性能瓶颈通常是指应用中限制整体性能的关键环节,优化这些环节能够显著提升系统的整体效能...

    Yii2的基本应用程序模板 yii-basic-app-2.0.12

    Yii2 是一个高性能的、基于组件的 PHP 框架,用于快速开发现代Web应用。"yii-basic-app-2.0.12"是Yii2框架的一个基础应用程序模板,适用于初学者和小型项目。这个模板提供了构建Web应用的基本结构和配置,让开发者...

    缓存设计详解:低成本的高性能Web应用解决方案.doc

    设计高度缓存的Web应用程序需要识别哪些内容可以缓存,哪些是动态的、不可缓存的。静态内容如HTML、CSS、JavaScript和图片等适合缓存,而动态内容如个性化数据、用户会话信息等则应直接从服务器获取。开发人员应遵循...

    jmessage-sdk-web-2.6.0 (1).zip_H4L_JMessage H5_Jmessage_automobi

    极光IM Web SDK适用于各种Web应用,如在线教育、社交网络、协同办公等领域,它可以帮助开发者快速构建聊天功能,提升用户粘性和活跃度。 总结,极光IM Web SDK 2.6.0为Web开发者提供了强大的即时通讯功能,结合SDK...

    WEB开发 之 HTML 5 应用程序缓存.docx

    HTML5的应用程序缓存,也称为App Cache,是一种强大的特性,允许Web应用程序在离线状态下仍能正常运行。这个特性通过创建一个名为manifest的文件,将特定的网页资源预先下载并存储在本地,以便在没有网络连接时使用...

    构建动态导航的Web应用程序

    在构建动态导航的Web应用程序时,我们探讨的核心是利用现代Web技术来创建交互性强、响应迅速的用户体验。这种类型的Web应用程序通常涉及到用户界面的实时更新,以及根据用户操作和数据变化自适应调整的导航结构。...

Global site tag (gtag.js) - Google Analytics