全面提升Web 2.0应用程序的性能3

简介：您知道为什么您的页面需要如此长的时间来渲染吗？您想知道哪个JavaScript 脚本函数占用了大部分时间吗？本文将继续介绍Web 2.0 应用性能分析过程中对于页面渲染
性能分析的方法学和工具，并结合IBM Mashups Center 产品，介绍如何对一个在浏览器端进行渲染的页面做性能剖析（profiling），分析剖析结果并且定位浏览器端脚本执行过程中的性能问题与瓶颈。

本文是“全面提升Web 2.0 应用程序的性能”系列文章的第3 篇。

查看本系列更多内容
谁在调用运行时间最长的方法？
简化的浏览器响应时间的计算模型
浏览器响应时间= 服务器响应时间+ 页面装载时间+ 页面渲染时间
页面渲染时间= 脚本执行时间+ 浏览器引擎渲染时间
衡量一个Web 2.0 应用是否成功的一条关键准则是客户对于应用页面装载时间的感受和
满意度。

用户对于一个应用的第一感受来自于他访问您的第一个页面，通常是应用的主页。

从技术上讲，我们认为“浏览器响应时间”是指用户感受到的，在浏览器上做出动作（通常是鼠标点击或者键盘敲击）开始到新页面（或者部分页面）显示完整的这段时间。

“浏览器响应时间” 包含三个主要的部分：
浏览器响应时间= 服务器响应时间+ 页面装载时间+ 页面渲染时间
对于“页面装载时间”的性能分析与优化，我们在前面的文章中已经进行了讨论。

在这篇文章中，我们着重讨论页面渲染时间，以及如何剖析和分析浏览器页面渲染时间，并通过找到其存在的性能问题与瓶颈来提高应用的性能。

页面渲染时间主要包含两个部分：
页面渲染时间= 脚本执行时间+ 浏览器引擎渲染时间
其中：
•“脚本执行时间”包含浏览器脚本执行引擎解析和执行脚本的时间，本文只讨论JavaScript 脚本。

•“浏览器引擎渲染时间”包含浏览器引擎渲染和显示图形界面UI 的时间。

不同的浏览器和浏览器版本有可能采用不同页面渲染技术，其执行效率和显示行为有一定的
差别，比如有些引擎在实现行为上进行了优化，使用户能先看到部分被渲染完成的
页面，然后逐渐显示后续的内容，这部分对于引擎的技术差异不在这篇文章的讨论
范围。

对于一个设计良好的页面，它在浏览器端的引擎渲染时间通常是固定且快速
的，在这里我们不打算深入讨论。

Web 2.0 应用中，越来越多的逻辑层和表现层的实现被转移到浏览器端。

对应用本身，这样不仅可以减轻服务器的负担，并且能提供非常丰富的用户体验，使应用有非常好的可用性。

浏览器端的页面聚合特性，也使得服务器的架构设计更加灵活，使应用有更大的可扩展性。

而从应用的性能角度来看，这势必加重了页面的渲染时间，过于差的页面显示延时，会严重影响用户的体验。

所以我们应该认识到应用里面的脚本已经变的很重要，而且可能成为应用的性能瓶颈。

为了提升脚本的执行性能，首先需要开发者在设计和实现的时候把性能考虑进去，同时也有一些成熟的JavaScript 脚本编程的性能建议可供开发者作为参考（参见参考资源），这可以帮助开发者在程序实现或者从服务器端迁移代码的时候避免调用一些在脚本执行中性能比较差的方法或算法。

有些时候，开发者并不能预测到代码中可能存在的性能问题，这时候性能分析技术能提供一些性能剖析的方法和工具，帮助我们对一些方法或者代码片段做性能剖析，从而分析内部潜在的性能问题。

在脚本语言中，主要的性能剖析方法有时间片剖析和调用流程剖析：
包含程序源代码支持不支持不支持
功能描述:
•时间片剖析：支持时间片剖析。

•调用流程剖析：支持调用流程剖析。

•无关过滤：支持快速过滤无关或者占用很小的函数，帮助分析主要的问题。

•父子节点统计分析：支持显示父子关系并且能便捷的在父子节点之间导航。

•离线分析：支持离线分析。

•快速检索：支持通过函数名称快速搜索。

•匹配匿名函数名：能够得到JavaScript 中使用的匿名函数的方法名或者成员函数名称。

•包含程序源代码：分析的时候支持查看程序源代码。

相对于基于Java 语言上的各类性能剖析工具，基于JavaScript 的性能剖析工具目前还不是很丰富，而且不同浏览器提供的功能也各不相同。

从上面的功能对比表中，我们可以看到目前的JavaScript 性能工具对于后期的离线分析、无关过滤以及快速检索的支持还不完善。

但这已经可以帮助我们查找与解决JavaScript 执行上的性能问题。

对于特定的浏览器上的JavaScript 性能问题，我们可以选择其中最合适的工具进行性能剖析。

回页首剖析IBM Mashups Center 的JavaScript 执行性能
接下来，我们将逐步展示一个典型的脚本剖析过程。

示例将使用Developer Tools for Internet Explorer 8（IE8）来对IBM Mashups Center 的应用做一个JavaScript 执行的剖析。

对于其它浏览器上的性能剖析工具，其基本步骤基本类似，就不再重复叙述。

这里，我们准备剖析IBM Mashups Center 在用户登录的动作，在用户输入用户名和密码做登录后，IBM Mashups Center 会显示该用户的默认主页。

下面是主要的步骤：
1. 启动浏览器：打开Internet Explorer 8 浏览器，清空浏览器缓存。

2. 装载页面：输入我们需要剖析的URL，等待页面装载完毕。

这里我们建议Internet
Explorer 8 只装载我们准备剖析的页面而没有同时装载其他页面。

3. 启动性能剖析工具：启动Internet Explorer 8 的“工具”菜单，找到“开发者工具”
（Tools->Developer Tools），点击启动“开发者工具”界面。

4. 开始性能剖析：在“开发者工具”用户界面，选择“Profiler”条目。

当我们准备好开始做
剖析动作时，点击“开始剖析”按钮。

5. 完成用户动作：回到IBM Mashups Center 页面，做页面登录动作，等待页面登录
完成。

6. 停止性能剖析：回到“开发者工具”界面，点击“停止剖析”。

7. 得到并分析结果：“开发者工具”界面显示这次性能剖析的结果。

当剖析动作结束以后，“开发者工具”界面会显示此次剖析的结果。

它可以有两种显示方式剖析结果：调用流程树视图或者函数列表视图。

•调用流程树视图：在这个视图，用树状图来显示JavaScript 脚本执行流程和它们的父子结构。

在每个节点显示一个方法，并列出该方法的父方法、它被父方法调用
的次数统计、它调用的子方法以及包含子方法的时间和不包含子方法的时间。

o调用次数（count）：表示在结构树里，当前方法被其父方法在当前调用关系里的调用次数统计。

它并不代表该方法在剖析采样时间段内被调用的总次
数。

•
•
回页首分析剖析结果
前面我们通过Developer Tools for Internet Explorer 8（IE8）对IBM Mashups Center 的登录动作进行了JavaScript 性能剖析，下面我们来分析一下这个结果。

通过“函数列表视图”，我们很容易找到那个方法调用占用了最多的时间，或者被调用的次数最多。

通过“调用流程树视图”，我们可以查找是哪些方法调用了那些最重的函数。

•被调用次数最多的函数：通常需要我们在“调用流程树视图”中看他们被调用的情况，调查是谁在调用这个方法。

是不是设计要求被调用这么多的次数？或者是被包含在
了一个不被预期的循环里。

当发现这类情况时，通常我们需要结合源程序看程序逻
辑来判断，一个常见的问题比如循环里面一个子函数调用总是返回相同的值，把这
个子函数调用移动到循环外面可以提高性能。

•包含子方法的时间占用最多：通常需要我们同时考虑不包含子方法的时间的占用情况。

如果不包含子方法的时间比较小，那就是它的方法占用了大部分时间，需要在“调用流程树视图”里查找其调用的子函数。

•不包含子方法的时间占用最多：通常我们需要结合该方法的被调用次数来计算平均时间。

如果单次平均时间比较小，那表示这个方法被调用的次数太多，需要我们考
虑如何减少调用次数。

如果单次平均时间比较大，那就需要结合源程序去优化程序
的结构或者算法。

在我们对IBM Mashups Center 的登录动作的性能剖析结果中，我们可以发现：•在函数列表视图中，函数“changePageContent”内部占用了超过45% 的时间，这是不包括子方法的时间。

我们需要进一步了解是谁在调用这个方法，以及它为何会
占用这么多的时间。

•然后，我们切换到调用流程树视图，开始查找这个占用时间最多的函数它在JavaScript 调用堆栈里的位置，最后我们找到了它的上下文关系。

如图3 所示：
图3. 示例：changePageContent 函数在调用流程树视图中的位置
•根据图3 指示的上下文关系，我们可以得到几个相关的函数名称，以及它们之间的调用关系。

从初步判断，我们可以理解为JavaScript 脚本在处理Mashups page 的内容更新与渲染。

•如果需要进一步分析，需要结合JavaScript 的源码来进行进一步的分析。

通过以上的性能剖析，已经能够帮助我们找到页面JavaScript 脚本执行在各个函数中的分布以及它们的上下文关系。

对于比较复杂的JavaScript 脚本性能问题，通常需要结合源码源码阅读，添加日志输出等方法来定位问题，所有这些可以帮助我们快速定位、分析、验证脚本中的性能问题。

回页首总结
本文我们主要讨论了如何对于页面渲染时间的性能分析，首先介绍了几个主要浏览器的性能剖析工具，然后结合对IBM Mashups Center 的性能剖析示例，介绍了如何利用工具来进行性能剖析与问题定位。