关注移动Web应用性能问题（上）

　　移动平台逐渐成为客户端应用的主流载体之一，为了消除应用在不同移动平台的兼容性，采用Web形式开发移动应用成为潮流（当然特别依赖于原生功能和性能的应用，如游戏可能例外）。随着Web移动应用越来越多，其性能方面的分析与研究也逐渐受到重视。本文试图从多个角度来阐述移动Web应用性能优化的各个方面，其中主要引用了Google性能优化专家Steve Souders的精彩观点，希望能够为国内移动开发社区带来一些启示。

　　随着Web2.0应用的广泛采纳，Web性能越来越受到重视。有关Web应用的性能调优标准早已经深入人心，如Yahoo！的《Best Practices for Speeding Up Your Web Site》和Google的《Web Performance Best Practices》，这些标准在桌面浏览器的Web性能分析中起到了关键的作用，

　　现在轮到移动平台的性能调优了。技术专家Steve Souders之前在博客中宣布，今后他将会把大部分时间和精力放在移动Web性能的研究工作上，其基本的思路归结为如下几点：

• 衡量：确定分析性能的指标和标准。
• 分析：通过工具对性能问题进行度量。
• 研究：分析性能问题，找出根源。
• 最佳实践/分享：总结出最有可能改进移动性能的各种方法，并发布出来。
• 提示：开发提示性能问题的工具
• 自动化：提供服务修补问题。

　　读者可能会问：为什么要特别关注移动Web应用性能问题？传统的桌面Web应用经验不能适用吗？我们简单列举一下移动平台的几个特殊性：

• 移动设备的硬件限制。
• 移动浏览器的精简实现。
• 移动网络的不稳定性。
• 移动Web开发的发展阶段。

　　从上面四点，读者会发现移动Web应用有其特殊的生存环境，传统的Web性能优化标准不能完全适用于移动平台，所以我们需要单独将其作为一个研究领域。考虑到移动网络的不稳定性，Souders建议大家先去掉这一不稳定因素，即首先关注通过wifi上网的移动设备的性能问题，这样就缩小了研究的范围。等时机成熟了再全面引入网络环境的性能影响。

　　目前，移动Web应用的性能研究工作主要困难在于——工具太少！大多数浏览器工具（Firebug、Page Speed、YSlow、Dynatrace）都运行在桌面操作系统上，不支持移动设备，其中有一些工具是浏览器插件，但是目前不支持安装在浏览器的移动版本上，另外一些则是特定的桌面操作系统的可执行文件，同样不支持移动平台。Steve Souders分析了当前桌面工具的可用性：

• Bookmarklet（小书签，是除了浏览器插件的又一扩展形式）一般适用于所有浏览器。它们是纯JavaScript脚本，也支持移动浏览器。
• Greasemonkey适用于大多数浏览器。它们大部分是JavaScript代码，一小部分是依赖于浏览器的API，因此难以构建。它们优于Bookmarklet的特点在于功能稍微强大一点，包括自动启动等。
• 浏览器插件是最强大的，但也是最难构建的。开发过程根据浏览器而异，大多数非主流浏览器不支持插件。

　　从以上的分析来看，bookmarklet是当前最方便的工具选择，Souders推荐了一套优秀的分析bookmarklet工具包，包括：Firebug Lite、DOM Monster、SpriteMe、CSSess、Zoompf和Page Resources。为了方便性能分析人员使用，他建立了一个meta-bookmarklet页面，大家可以通过访问一个网页使用所有的bookmarklet工具！在移动浏览器上安装的过程也比较简单：

1. 单击链接Mobile Perf bookmarklet。
2. 将该页加入书签。
3. 编辑书签的URL，删除#之前的所有内容，只保留以"javascript:"开头的URL即可。

　　现在简单介绍Bookmarklet工具集的一些成员：

• Firebug Lite

几乎所有Web开发人员都知道Firebug。其实，Firebug Lite是Firebug的bookmarklet 版本，可以运行在包括IE和WebKit的所有浏览器中。它提供了Console、HTML viewer和DOM inspector等功能，不过Firefug的一些高级功能无法支持，比如profiler、debugger和Net Panel，但是当你使用的移动浏览器不支持Firebug时，Firebug Lite就一个好工具。

• Page Resources

Souders的作品，能够分析DOM树，找到所有下载的资源。不过由于是bookmarklet形式，它无法提供HTTP头部信息、文件大小、下载时间等，也无法找到不在DOM中的资源，比如图片信标（image beacon）。

• DOM Monster

DOM Monster这个工具，最初需要购买Thomas Fuchs和Amy Hoy的电子书JavaScript Performance Rocks才能得到授权使用，但是Souders说服了Thomas和Amy将其开源，该工具能够提供页面的DOM数据，并提示如何改进性能。

• SpriteMe

Souders的作品，能够为分散的CSS背景图片创建CSS sprites以提高性能。

• CSSess

该工具可以找到未使用的CSS选择器。

• Zoompf

Zoompf会执行一系列的性能检查算法来分析网页。该工具与其他不同的一点在于：它不会在移动浏览器中分析当前的页面。取而代之的是，它会让你访问一个Web服务器，重新下载网页并作分析，可以快速了解当前页面的性能问题。

　　感兴趣的朋友可以尝试使用这些工具来分析桌面或者移动web应用的页面，看看能否从中发现性能瓶颈。InfoQ还会继续推出有关性能分析的专题文章，敬请关注。