关注移动Web应用性能问题(上)

2021年1月11日   |   by tgcode

  移动平台逐渐成为客户端应用的主流载体之一,为了消除应用在不同移动平台的兼容性,采用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应用的性能研究工作主要困难在于——工具太少!大多数浏览器工具(FirebugPage SpeedYSlowDynatrace)都运行在桌面操作系统上,不支持移动设备,其中有一些工具是浏览器插件,但是目前不支持安装在浏览器的移动版本上,另外一些则是特定的桌面操作系统的可执行文件,同样不支持移动平台。Steve Souders分析了当前桌面工具的可用性:

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

  从以上的分析来看,bookmarklet是当前最方便的工具选择,Souders推荐了一套优秀的分析bookmarklet工具包,包括:Firebug LiteDOM MonsterSpriteMeCSSessZoompfPage 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,但是当你使用的移动浏览器不支持Firebugtgcode时,Firebug Lite就一个好工具。

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

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

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

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

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

相关推荐: 在浏览器中输入Google.com并且按下回车之后发生了什么?

  本文试图回答一个古老的面试问题:当你在浏览器中输入google.com并且按下回车之后发生了什么?   不过我们不再局限于平常的回答,而是想办法回答地尽可能具体,不遗漏任何细节。   这将是一个协作的过程,所以深入挖掘吧,并且帮助我们一起完善它。仍然有大量…