【AICon】 如何构建高效的 RAG 系统?RAG 技术在实际应用中遇到的挑战及应对策略?>>> 了解详情
写点什么

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

  • 2011-03-31
  • 本文字数:2001 字

    阅读完需:约 7 分钟

移动平台逐渐成为客户端应用的主流载体之一,为了消除应用在不同移动平台的兼容性,采用 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 还会继续推出有关性能分析的专题文章,敬请关注。

2011-03-31 04:073006
用户头像

发布了 501 篇内容, 共 246.5 次阅读, 收获喜欢 57 次。

关注

评论

发布
暂无评论
发现更多内容

架构师训练营第二周课后作业一

不谈

极客大学架构师训练营

架构师训练营第二周课后作业二

不谈

极客大学架构师训练营

用 Explain 命令分析 MySQL 的 SQL 执行

程序员历小冰

MySQL explian

架构师训练营 - 作业 - 第二周

心在飞

极客大学架构师训练营

架构师训练营 第二周 学习总结

一雄

学习 极客大学架构师训练营 第二周

第二周作业

Geek_5d0795

极客大学架构师训练营

Week2学习总结

wyzwlj

极客大学架构师训练营

第三周作业三:优化 Cache 类的设计

远方

学习总结—第二周

于江水

架构是训练营

第二周 软件设计原则

WW

架构师训练营 第二周 作业

一雄

极客大学架构师训练营 作业 第二周

架构师训练营作业-Week2

wyzwlj

极客大学架构师训练营

week2 作业

Geek_2e7dd7

0613总结

W_T

命题作业—第二周

于江水

极客大学架构师训练营

架构师训练营 第二周作业

大丁💸💵💴💶🚀🐟

ARTS - Week 3

Khirye

ARTS 打卡计划 arts

Class-only Protocols - class or AnyObject

SwiftMic

swift AnyObject

服务治理之轻量级熔断框架:Resilience4j

01Running

做产品少走弯路:你必须掌握的知识

我是IT民工

产品 互联网 方法论 思维方式 知识体系

Java参数传递分析

游侠最光阴

Java

第02周 开发编程框架 学习总结

Jaye

程序员的晚餐 | 6 月 15 日 红烧带鱼和清蒸多宝鱼

清远

美食

手撕设计原则:依赖倒置

JefferLiu

设计模式 架构师 面向对象设计 面向对象设计原则

第二周学习总结

Geek_5d0795

极客大学架构师训练营

架构师训练营第二周作业

W_T

江帅帅:精通 Spring Boot 系列 02

古月木易

Sprint Boot

week2 学习总结

Geek_2e7dd7

Spring Aware 你不能不知道的事

CoderLi

Java spring 程序员 源码分析 后端

游戏夜读 | 什么是全力以赴?

game1night

Flink on Zeppelin (2) - Batch篇

章剑锋_Jeff

大数据 flink 流计算 Zeppelin

关注移动Web应用性能问题(上)_Java_崔康_InfoQ精选文章