关注移动 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 还会继续推出有关性能分析的专题文章，敬请关注。