• <noscript id="eom2a"><optgroup id="eom2a"></optgroup></noscript>
    <tt id="eom2a"><small id="eom2a"></small></tt>
    <input id="eom2a"></input>
  • <div id="eom2a"><small id="eom2a"></small></div>
    <td id="eom2a"><small id="eom2a"></small></td>
  • 您的位置:知識庫 ? Web前端

    關注移動Web應用性能問題(上)

    來源: infoq  發布時間: 2011-04-02 10:15  閱讀: 914 次  推薦: 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應用的性能研究工作主要困難在于——工具太少!大多數瀏覽器工具(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,但是當你使用的移動瀏覽器不支持Firebug時,Firebug Lite就一個好工具。

    • Page Resources
    • Souders的作品,能夠分析DOM樹,找到所有下載的資源。不過由于是bookmarklet形式,它無法提供HTTP頭部信息、文件大小、下載時間等,也無法找到不在DOM中的資源,比如圖片信標(image beacon)。

    • SpriteMe
    • Souders的作品,能夠為分散的CSS背景圖片創建CSS sprites以提高性能。

    • CSSess
    • 該工具可以找到未使用的CSS選擇器。

    • Zoompf
    • Zoompf會執行一系列的性能檢查算法來分析網頁。該工具與其他不同的一點在于:它不會在移動瀏覽器中分析當前的頁面。取而代之的是,它會讓你訪問一個Web服務器,重新下載網頁并作分析,可以快速了解當前頁面的性能問題。

      感興趣的朋友可以嘗試使用這些工具來分析桌面或者移動web應用的頁面,看看能否從中發現性能瓶頸。InfoQ還會繼續推出有關性能分析的專題文章,敬請關注。

    0
    0
    標簽:web 性能 前端

    Web前端熱門文章

      Web前端最新文章

        最新新聞

          熱門新聞

            黄色网_免费在线黄色电影_黄色成人快播电影_伦理电影_黄色片