如何提升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的版本号"> 来有效利用和更新缓存.
分享到:
相关推荐
您可以通过缓存和提供由 Service Worker 提供支持的文件来提高 Web 应用程序的性能。 即使在不可靠的连接上,您的 Web 应用程序仍然可以使用正确的运行时缓存策略工作。 想要构建一个渐进式 Web 应用程序? Workbox...
1.1.2web应用程序 2 1.2使用java开发web应用 3 1.2.1面向对象的编程语言 3 1.2.2丰富的框架技术 4 1.2.3xml、css的应用 4 1.2.4使用javascript与ajax提升用户体验 7 1.3多种集成开发环境 9 1.3.1集成开发环境...
整体而言,全书既有直观的实例,又有深入的分析,同时还涵盖了web应用开发中各方面的相关知识,堪称一部内容全面而又深入浅出的佳作。 图书目录 第1章 简介 1 1.1 Rails是敏捷的 2 1.2 读你所需 3 1.3 致谢 5 第1...
项目是采用PHP开发,旨在为开发人员提供一套可重用的代码库,以便快速构建各种Web应用程序。...无论您是初学者还是经验丰富的开发人员,我们相信我们的源码将能够帮助您快速构建出优秀的Web应用程序。
项目是采用PHP开发,旨在为开发人员提供一套可重用的代码库,以便快速构建各种Web应用程序。...无论您是初学者还是经验丰富的开发人员,我们相信我们的源码将能够帮助您快速构建出优秀的Web应用程序。
您好访客,在这里您将找到渐进式Web应用程序的基本模板,该PWA显示了最新的技术新闻,并使用新闻API ( )请求信息。 此仓库由4个分支组成: app-shell:包括Web应用程序的基本结构。 (HTML,JS,CSS) 服务工作...
项目是采用PHP开发,旨在为开发人员提供一套可重用的代码库,以便快速构建各种Web应用程序。...无论您是初学者还是经验丰富的开发人员,我们相信我们的源码将能够帮助您快速构建出优秀的Web应用程序。
离线演示 GWT 离线应用演示,带有 SQL.js、应用缓存和本地存储 它是什么 ? 这个项目是一个支持离线模式的... 请注意,由于使用了新破解的 SQL.js 版本(允许提高 Firefox 和 Chrome 的性能),该应用程序尚不兼容 IE
8.2.1 Web应用程序和DataSet 8.2.2 XML集成 8.3 DataSet类 8.4 DataAdapter类 8.4.1 填充DataSet 8.4.2 使用多个表和关系 8.4.3 查找特定行 8.4.4 在数据访问类里使用DataSet 8.4.5 数据绑定 8.5...
它可以作为独立平台运行,也可以与一起作为全栈Web应用程序运行。 DADI Web使构建自定义企业级Node.JS应用程序变得容易。 轻松创建静态页面或连接到API以生成数据驱动页面,使您能够搜索,分页,排序和过滤数据。 ...
视频-图书馆-管理-系统- 这是一个基于 node.js 的视频库 Web 应用程序。 通过数据库连接池、数据非规范化、使用 Redis 的 SQL 缓存和准备好的语句提高性能
项目是采用PHP开发,旨在为开发人员提供一套可重用的代码库,以便快速构建各种Web应用程序。...无论您是初学者还是经验丰富的开发人员,我们相信我们的源码将能够帮助您快速构建出优秀的Web应用程序。
项目是采用PHP开发,旨在为开发人员提供一套可重用的代码库,以便快速构建各种Web应用程序。...无论您是初学者还是经验丰富的开发人员,我们相信我们的源码将能够帮助您快速构建出优秀的Web应用程序。
项目是采用PHP开发,旨在为开发人员提供一套可重用的代码库,以便快速构建各种Web应用程序。...无论您是初学者还是经验丰富的开发人员,我们相信我们的源码将能够帮助您快速构建出优秀的Web应用程序。
31.如何利用数据缓存技术提高程序的性能 33.如何实现当页面产生错误时重定向到自定义错误界面 35.如何在程序中读写Web.config文件 37.如何使用CSS文件定义控件的样式 38.如何启用和禁用ViewState保存状态信息的...
包括如何使用ASP.NET MVC4框架构建Web应用程序,ASP.NET MVC 4框架的运行原理,如何在真实开发场景中使用ASP.NET MVC4框架新特性来解决不同的需求,如何使用HTML、JavaScript、EntityFramework以及其他Web相关的技术...
第1章:ASP.NET MVC基础 第2章:ASP.NET Web Form开发人员必读 第3章:使用数据 第4章:客户端开发 第5章:Web应用程序架构 第6章:使用AJAX提升网站体验 第7章:ASP.NET Web API 第8章:高级数据 第9章:安全 第10...
ContainerJS是JavaScript Web应用程序的依赖注入容器。 特征 依赖性解析和注入 ContainerJS负责创建容器管理的对象,以及解析和注入其依赖的组件。 您可以通过JavaScript代码在组件定义中指定依赖项,也可以在类中...
7.web应用程序5级缓存优化 8.程序版权著作保护(图片,程序,软件应用,公司版权保护,著作权,开发作者信息设置) 9.代码生成开源,自定义灵活生成 10.高复用功能代码DLL公共类库(常见功能经典收藏)蓦然回首魔法...