|
|
移動(dòng)平臺(tái)逐漸成為客戶端應(yīng)用的主流載體之一，為了消除應(yīng)用在不同移動(dòng)平臺(tái)的兼容性，采用Web形式開(kāi)發(fā)移動(dòng)應(yīng)用成為潮流（當(dāng)然特別依賴(lài)于原生功能和性能的應(yīng)用，如游戲可能例外）。隨著Web移動(dòng)應(yīng)用越來(lái)越多，其性能方面的分析與研究也逐漸受到重視。本文試圖從多個(gè)角度來(lái)闡述移動(dòng)Web應(yīng)用性能優(yōu)化的各個(gè)方面，其中主要引用了Google性能優(yōu)化專(zhuān)家Steve Souders的精彩觀點(diǎn)，希望能夠?yàn)閲?guó)內(nèi)移動(dòng)開(kāi)發(fā)社區(qū)帶來(lái)一些啟示。
隨著Web2.0應(yīng)用的廣泛采納，Web性能越來(lái)越受到重視。有關(guān)Web應(yīng)用的性能調(diào)優(yōu)標(biāo)準(zhǔn)早已經(jīng)深入人心，如Yahoo！的《Best Practices for Speeding Up Your Web Site》和Google的《Web Performance Best Practices》，這些標(biāo)準(zhǔn)在桌面瀏覽器的Web性能分析中起到了關(guān)鍵的作用，
現(xiàn)在輪到移動(dòng)平臺(tái)的性能調(diào)優(yōu)了。技術(shù)專(zhuān)家Steve Souders之前在博客中宣布，今后他將會(huì)把大部分時(shí)間和精力放在移動(dòng)Web性能的研究工作上，其基本的思路歸結(jié)為如下幾點(diǎn)：
- 衡量：確定分析性能的指標(biāo)和標(biāo)準(zhǔn)。
- 分析：通過(guò)工具對(duì)性能問(wèn)題進(jìn)行度量。
- 研究：分析性能問(wèn)題，找出根源。
- 最佳實(shí)踐/分享：總結(jié)出最有可能改進(jìn)移動(dòng)性能的各種方法，并發(fā)布出來(lái)。
- 提示：開(kāi)發(fā)提示性能問(wèn)題的工具
- 自動(dòng)化：提供服務(wù)修補(bǔ)問(wèn)題。
讀者可能會(huì)問(wèn)：為什么要特別關(guān)注移動(dòng)Web應(yīng)用性能問(wèn)題？傳統(tǒng)的桌面Web應(yīng)用經(jīng)驗(yàn)不能適用嗎？我們簡(jiǎn)單列舉一下移動(dòng)平臺(tái)的幾個(gè)特殊性：
- 移動(dòng)設(shè)備的硬件限制。
- 移動(dòng)瀏覽器的精簡(jiǎn)實(shí)現(xiàn)。
- 移動(dòng)網(wǎng)絡(luò)的不穩(wěn)定性。
- 移動(dòng)Web開(kāi)發(fā)的發(fā)展階段。
從上面四點(diǎn)，讀者會(huì)發(fā)現(xiàn)移動(dòng)Web應(yīng)用有其特殊的生存環(huán)境，傳統(tǒng)的Web性能優(yōu)化標(biāo)準(zhǔn)不能完全適用于移動(dòng)平臺(tái)，所以我們需要單獨(dú)將其作為一個(gè)研究領(lǐng)域。考慮到移動(dòng)網(wǎng)絡(luò)的不穩(wěn)定性，Souders建議大家先去掉這一不穩(wěn)定因素，即首先關(guān)注通過(guò)wifi上網(wǎng)的移動(dòng)設(shè)備的性能問(wèn)題，這樣就縮小了研究的范圍。等時(shí)機(jī)成熟了再全面引入網(wǎng)絡(luò)環(huán)境的性能影響。
目前，移動(dòng)Web應(yīng)用的性能研究工作主要困難在于——工具太少！大多數(shù)瀏覽器工具（Firebug、Page Speed、YSlow、Dynatrace）都運(yùn)行在桌面操作系統(tǒng)上，不支持移動(dòng)設(shè)備，其中有一些工具是瀏覽器插件，但是目前不支持安裝在瀏覽器的移動(dòng)版本上，另外一些則是特定的桌面操作系統(tǒng)的可執(zhí)行文件，同樣不支持移動(dòng)平臺(tái)。Steve Souders分析了當(dāng)前桌面工具的可用性：
- Bookmarklet（小書(shū)簽，是除了瀏覽器插件的又一擴(kuò)展形式）一般適用于所有瀏覽器。它們是純JavaScript腳本，也支持移動(dòng)瀏覽器。
- Greasemonkey適用于大多數(shù)瀏覽器。它們大部分是JavaScript代碼，一小部分是依賴(lài)于瀏覽器的API，因此難以構(gòu)建。它們優(yōu)于Bookmarklet的特點(diǎn)在于功能稍微強(qiáng)大一點(diǎn)，包括自動(dòng)啟動(dòng)等。
- 瀏覽器插件是最強(qiáng)大的，但也是最難構(gòu)建的。開(kāi)發(fā)過(guò)程根據(jù)瀏覽器而異，大多數(shù)非主流瀏覽器不支持插件。
從以上的分析來(lái)看，bookmarklet是當(dāng)前最方便的工具選擇，Souders推薦了一套優(yōu)秀的分析bookmarklet工具包，包括：Firebug Lite、DOM Monster、SpriteMe、CSSess、Zoompf和Page Resources。為了方便性能分析人員使用，他建立了一個(gè)meta-bookmarklet頁(yè)面，大家可以通過(guò)訪問(wèn)一個(gè)網(wǎng)頁(yè)使用所有的bookmarklet工具！在移動(dòng)瀏覽器上安裝的過(guò)程也比較簡(jiǎn)單：
- 單擊鏈接Mobile Perf bookmarklet。
- 將該頁(yè)加入書(shū)簽。
- 編輯書(shū)簽的URL，刪除#之前的所有內(nèi)容，只保留以"
Javascript:"開(kāi)頭的URL即可。
現(xiàn)在簡(jiǎn)單介紹Bookmarklet工具集的一些成員：
- Firebug Lite
幾乎所有Web開(kāi)發(fā)人員都知道Firebug。其實(shí)，F(xiàn)irebug Lite是Firebug的bookmarklet 版本，可以運(yùn)行在包括IE和WebKit的所有瀏覽器中。它提供了Console、HTML viewer和DOM inspector等功能，不過(guò)Firefug的一些高級(jí)功能無(wú)法支持，比如profiler、debugger和NET Panel，但是當(dāng)你使用的移動(dòng)瀏覽器不支持Firebug時(shí)，F(xiàn)irebug Lite就一個(gè)好工具。
- Page Resources
Souders的作品，能夠分析DOM樹(shù)，找到所有下載的資源。不過(guò)由于是bookmarklet形式，它無(wú)法提供HTTP頭部信息、文件大小、下載時(shí)間等，也無(wú)法找到不在DOM中的資源，比如圖片信標(biāo)（image beacon）。
- DOM Monster
DOM Monster這個(gè)工具，最初需要購(gòu)買(mǎi)Thomas Fuchs和Amy Hoy的電子書(shū)JavaScript Performance Rocks才能得到授權(quán)使用，但是Souders說(shuō)服了Thomas和Amy將其開(kāi)源，該工具能夠提供頁(yè)面的DOM數(shù)據(jù)，并提示如何改進(jìn)性能。
- SpriteMe
Souders的作品，能夠?yàn)榉稚⒌腃SS背景圖片創(chuàng)建CSS sprites以提高性能。
- CSSess
該工具可以找到未使用的CSS選擇器。
- Zoompf
Zoompf會(huì)執(zhí)行一系列的性能檢查算法來(lái)分析網(wǎng)頁(yè)。該工具與其他不同的一點(diǎn)在于：它不會(huì)在移動(dòng)瀏覽器中分析當(dāng)前的頁(yè)面。取而代之的是，它會(huì)讓你訪問(wèn)一個(gè)Web服務(wù)器，重新下載網(wǎng)頁(yè)并作分析，可以快速了解當(dāng)前頁(yè)面的性能問(wèn)題。
感興趣的朋友可以嘗試使用這些工具來(lái)分析桌面或者移動(dòng)web應(yīng)用的頁(yè)面，看看能否從中發(fā)現(xiàn)性能瓶頸。InfoQ還會(huì)繼續(xù)推出有關(guān)性能分析的專(zhuān)題文章，敬請(qǐng)關(guān)注。
it知識(shí)庫(kù)：關(guān)注移動(dòng)Web應(yīng)用性能問(wèn)題（上），轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
