文档章节

提升Web应用程序性能的最佳实践

DustLeon
 DustLeon
发布于 2012/02/19 10:27
字数 2090
阅读 147
收藏 3

导读:作为开发人员,Web页面加载或刷新的速度对其网站至关重要。在浏览器中调整性能问题比在Java应用程 序中更难。开发人员在各种浏览器中调试JavaScript的方法要少得多。比如,在Mozilla Firefox中,可以使用Firebug调试JavaScript,但仍然不能调整很多性能问题,如浏览器呈现消耗时间。为了解决这些问题,有必要开发 浏览器插件来监控时间响应,以及确定其他对应解决方案如部分呈现或延时加载。

本文节选自IBM developerWorks 提升Web应用程序的性能的系列文章,该文通过Web应用程序性能的最佳实践案例,帮助开发者更好地理解影响Web应用程序性能的因素,学习如何诊断Web应用程序中的性能问题,找到客户端内容中的瓶颈,并确定解决方案。

一、提升Web应用程序性能的6种基本方式

1.减少HTTP请求数

每个HTTP请求都有开销,包括查找DNS、创建连接及等待响应,因此削减不必要的请求数可减少不必要的开销。要减少请求数:

  • 合并文件。将总是同时使用的脚本合并到同一个文件中,不会减小总大小,但将会减少请求数。还可以同样方法合并CSS文件和图片。可以实现文件自动合并:
  • 在构建阶段。用<concat>标记,通过运行Ant合并文件。
  • 在运行时阶段。启用mod_concat模块。如果httpServer是Apache,用 pack:Tag作为JSP标签库来合并JavaScript和样式表文件。(pack:Tag是一个JSP-Taglib,可缩减、压缩及合并资源,如 JavaScript和CSS,并将它们在内容或普通文件中缓存。)
  • 使用CSS Sprites。将背景图片合并成一个图片,并使用CSS background-image和background-position属性来显示所需图片部分。还可使用内联图片减少请求数。

2.后置加载组件

只呈现需要的组件;其余可等待。最好不要一次呈现太多组件。

某些情况下,可使用后置加载。由于浏览器可视区域外的组件可以后置加载,当这些组建进入可视区域不久后,初始呈现就会失效。

有些JavaScript可以在onload事件后后置加载,如JavaScript中初始呈现后拖动某个元素。

3.前置加载组件

通过前置加载组件,可以利用浏览器的空闲时间请求将来会用到的组件(如图像、样式和脚本)。当用户访问下个页面时,如果大多数组件都已在缓存中加载,那页面加载会快得多。

有两种前置加载:

无条件:一旦触发onload,就取得一些额外组件。

有条件:根据用户的动作,推测用户下一步的方向并进行相应的前置加载。

4.将脚本放在底部

脚本可能会产生问题,因为它们可能会阻碍并行下载。当下载脚本时,浏览器不会再启动其他下载,即使那些位于不同主机。将脚本,如样式表,放在底部,以保证它们在其他下载完成后再下载。

也可以使用延时脚本,这只有Internet Explorer支持。DEFER属性表示脚本不含document.write()。这就告诉浏览器他们可以持续呈现。

5.使用无cookie域组件

当浏览器发出对静态图片的请求,并随之发送cookie时,服务器不会使用那些cookie。由于这些cookie只会造成不必要的网络流量,确保用无请求来请求静态组件。然后使用子域和主机保存这些静态组件。

6.将JavaScript和CSS放在外部

现实世界中使用外部文件通常会使页面运行更快,因为JavaScript和CSS文件被浏览器缓存。HTML文档内的JavaScript和CSS 会在每次请求HTML文档时被下载。这减少了需要请求的HTTP的数量,但增加了HTML文档的大小。另一方面,如果JavaScript和CSS在被浏 览器缓存的外部文件中,就会减小HTML文档大小,而不会增加请求数。

二、改进RIA小部件性能方法

主流RIA Ajax框架,如ExtJS、YUI、Dojo及其他,都提供一些精巧的小部件库,以增强用户体验。与其他框架相比,Dojo在企业开发领域更强大,这是由于:

  • Object-oriented programming(OOP)编码
  • 跨平台
  • 本地数据存储的Dojo离线API支持
  • DataGrid、2D和3D图形(图表组件提供了在浏览器展示报表更简单的方法)

Dojo在很多网站广泛使用。这里将使用Dojo举例,分析RIA小部件的性能。可根据具体情况使用Dojo小部件调整工具,有Page Speed、Rock Star Optimizer及Jiffy。强烈建议使用YSlow和Firebug。

YSlow

YSlow根据一组高性能Web页面准则,通过检查页面上所有组件,包括由JavaScript创建的,来分析Web页面性能。YSlow是一个集 成了Firebug Web开发工具的Firefox插件;它可提供提升页面性能的建议、总结组件性能、显示页面统计数据并提供用于性能分析的工具。

图中显示的是YSlow Grade选项卡上的信息。 

YSlow Grade 面板是 Firefox 插件的一部分

YSlow的Web页面建立在22条可测试的规则基础上,这些规则在下方按重要性和效果排列。研究显示,按照以下规则,Web页面响应时间可提升25%到50%:

  • 尽量减少HTTP请求数。
  • 使用内容发布网络(CDN)。
  • 添加Expires或Cache-Control头部。
  • 用Gzip压缩内容。
  • 将样式表放在顶部。
  • 将脚本放在底部。
  • 避免使用CSS表达式。
  • 将JavaScript和CSS放在外部。
  • 减少DNS搜索。
  • 精简JavaScript和CSS。
  • 避免使用重定向。
  • 删除重复的脚本。
  • 配置ETags。
  • 使Ajax可缓存。
  • 使用GET进行Ajax请求。
  • 减少DOM元素数。
  • 消除404错误。
  • 减小cookie大小。
  • 对组件使用无cookie的域。
  • 避免使用过滤器。
  • 不在HTML中测量图片大小。
  • 使favicon.ico尽可能小,可缓存。

如图:图中的YSlow Statistics,对空缓存的访问用户和之前访问过页面的用户的页面大小做了对比。

Components选项卡显示了每个组件及相关的性能信息。例如,如果组件被gzip压缩,或ETag有内容(如果的话),都能看到。组件大小和超期时间也显示在Components选项卡中,如图所示。

Firebug

Firebug与Mozilla Firefox集成,在浏览网站时有大量开发工具随手可用。可以即时编辑、调试、监控Web页面中的CSS、HTML和JavaScript。

可以使用Firebug Net面板,如图所示,监控Web页面产生的HTTP流量。它向用户展示了所有收集到的和计算出的信息。每个条目表示页面的一个请求/响应来回。

Firebug Console面板,如图所示,提供了两种监控代码性能的方法。 

Profile

对于某个特定的函数,使用Profiler。JavaScript Profiler是能用来测量每个JavaScript代码执行时间的Firebug特性。使用JavaScript Profiler来提升代码的性能,或是查看为什么某个函数运行时间过长。它与console.time();类似,但JavaScript Profiler能提供更多代码内部过程细节。

console.time()

对于特定代码段,使用console.time()。控制台会显示您输入到命令行的命令的结果。可以使用console.time(timeName)函数测量某个特定代码或函数执行多长时间。该特性对于提升JavaScript代码的性能非常有用,样例显示:


    
  1. var timeName = 'measuringTime';    
  2. console.time(timeName); //start of the timer     
  3. for(var i=;i<1000;i++){    
  4. //do something    
  5. console.timeEnd(timeName);  //end of the timer 

measuringTime:xxms将显示在控制台。

结束语

文中,开发者学习了如何识别Web应用程序中的一些问题或瓶颈。开发者们应了解一些工具、窍门和技巧,以用于调整和改善对用户的性能。

本文转载自:http://sd.csdn.net/a/20110919/304627.html

共有 人打赏支持
DustLeon
粉丝 6
博文 22
码字总数 620
作品 0
广州
程序员
私信 提问
编写高性能 Java 代码的最佳实践

摘要:本文首先介绍了负载测试、基于APM工具的应用程序和服务器监控,随后介绍了编写高性能Java代码的一些最佳实践。最后研究了JVM特定的调优技巧、数据库端的优化和架构方面的调整。以下是译...

这篇文章
06/20
0
0
前端每周清单半年盘点之 PWA 篇

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公...

王下邀月熊
2017/08/29
0
0
Symfony 2.0 发布,PHP框架

经过12个预览发行、5个beta版以及6个RC版,Symfony 终于迎来了2.0版本。2.0版本提升了性能、继续简化开发过程以及更加安全,详情请看官方发行说明。 简单的模板功能symfony是一个开源的PHP W...

红薯
2011/07/30
1K
3
最大限度利用 JavaScript 和 Ajax 性能

简介 在 web 早期,优化 web 页面的性能通常意味着避免了使用不必要的 HTML 标记,将 JavaScript 代码量控制到最小,并尽量减小所有图片文件大小,否则上网冲浪者会走开去泡杯咖啡来等待页面...

IBMdW
2011/08/08
2.8K
3
一文了解 Java 应用程序性能优化指南

  在《2018 最具就业前景的 7 大编程语言》一文中,通过分析了来自 Indeed 的 25 门编程语言、栈和框架的数据,我们盘点了18年最具就业前景的七大编程语言,其中,Java毫无悬念拔得头筹。 ...

CSDN
01/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JeeSite 4.x 树形结构的表设计和用法

有些同仁对于 JeeSite 4 中的树表设计不太了解,本应简单的方法就可实现,却写了很多复杂的语句和代码,所以有了这篇文章。 在 JeeSite 4 中的树表设计我还是相对满意的,这种设计比较容易理...

ThinkGem
13分钟前
1
0
0022-如何永久删除Kafka的Topic

1.问题描述 使用kafka-topics --delete命令删除topic时并没有真正的删除,而是把topic标记为:“marked for deletion”,导致重新创建相同名称的Topic时报错“already exists”。 2.问题复现...

Hadoop实操
16分钟前
0
0
技术工坊|区块链中的p2p网络(上海)

区块链是一个去中心化的系统,每个节点分布在全球各地,那么节点之间是如何自发地组成网络,又如何进行通信的?区块链中的p2p网络算法与bt下载中的p2p网络有什么区别?11月28日,第29期技术工...

HiBlock
21分钟前
1
0
MySQL性能优化之char、varchar、text的区别

在存储字符串时, 可以使用char、varchar或者text类型, 那么具体使用场景呢? 参考下面这个表结构: 1、 char长度固定, 即每条数据占用等长字节空间;适合用在身份证号码、手机号码等定。 ...

hansonwong
24分钟前
0
0
并发编程系列:4大并发工具类的功能、原理、以及应用场景

一:并发工具包 1.并发工具类 提供了比synchronized更加高级的各种同步结构:包括CountDownLatch、CyclicBarrier、Semaphore等,可以实现更加丰富的多线程操作。 2.并发容器 提供各种线程安全...

游人未归
34分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部