關注移動Web應用性能問題（上）

來源: infoq 發布時間: 2011-04-02 10:15 閱讀: 958 次推薦: 0 原文鏈接 [收藏]

　　移動平臺逐漸成為客戶端應用的主流載體之一，為了消除應用在不同移動平臺的兼容性，采用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工具！在移動瀏覽器上安裝的過程也比較簡單：

單擊鏈接Mobile Perf bookmarklet。
將該頁加入書簽。
編輯書簽的URL，刪除#之前的所有內容，只保留以"javascript:"開頭的URL即可。

　　現在簡單介紹Bookmarklet工具集的一些成員：

幾乎所有Web開發人員都知道Firebug。其實，Firebug Lite是Firebug的bookmarklet 版本，可以運行在包括IE和WebKit的所有瀏覽器中。它提供了Console、HTML viewer和DOM inspector等功能，不過Firefug的一些高級功能無法支持，比如profiler、debugger和Net Panel，但是當你使用的移動瀏覽器不支持Firebug時，Firebug Lite就一個好工具。