全面提升Web 2.0應(yīng)用程序的性能3

簡(jiǎn)介：

您知道為什么您的頁面需要如此長(zhǎng)的時(shí)間來渲染嗎？您想知道哪個(gè)JavaScript腳本函數(shù)占用了大部分時(shí)間嗎？本文將繼續(xù)介紹Web2.0應(yīng)用性能分析過程中對(duì)于頁面渲染性能分析的方法學(xué)和工具，并結(jié)合IBMMashupsCenter產(chǎn)品，介紹如何對(duì)一個(gè)在瀏覽器端進(jìn)行渲染的頁面做性能剖析（profiling），分析剖析結(jié)果并且定位瀏覽器端腳本執(zhí)行過程中的性能問題與瓶頸。本文是

“全面提升Web2.0應(yīng)用程序的性能”

系列文章的第3篇。查看本系列更多內(nèi)容誰在調(diào)用運(yùn)行時(shí)間最長(zhǎng)的方法？簡(jiǎn)化的瀏覽器響應(yīng)時(shí)間的計(jì)算模型瀏覽器響應(yīng)時(shí)間=服務(wù)器響應(yīng)時(shí)間+頁面裝載時(shí)間+頁面渲染時(shí)間頁面渲染時(shí)間=腳本執(zhí)行時(shí)間+瀏覽器引擎渲染時(shí)間衡量一個(gè)Web2.0應(yīng)用是否成功的一條關(guān)鍵準(zhǔn)則是客戶對(duì)于應(yīng)用頁面裝載時(shí)間的感受和滿意度。用戶對(duì)于一個(gè)應(yīng)用的第一感受來自于他訪問您的第一個(gè)頁面，通常是應(yīng)用的主頁。從技術(shù)上講，我們認(rèn)為“瀏覽器響應(yīng)時(shí)間”是指用戶感受到的，在瀏覽器上做出動(dòng)作（通常是鼠標(biāo)點(diǎn)擊或者鍵盤敲擊）開始到新頁面（或者部分頁面）顯示完整的這段時(shí)間。“瀏覽器響應(yīng)時(shí)間”包含三個(gè)主要的部分：瀏覽器響應(yīng)時(shí)間=服務(wù)器響應(yīng)時(shí)間+頁面裝載時(shí)間+頁面渲染時(shí)間對(duì)于“頁面裝載時(shí)間”的性能分析與優(yōu)化，我們?cè)?/p>

前面的文章中

已經(jīng)進(jìn)行了討論。在這篇文章中，我們著重討論頁面渲染時(shí)間，以及如何剖析和分析瀏覽器頁面渲染時(shí)間，并通過找到其存在的性能問題與瓶頸來提高應(yīng)用的性能。頁面渲染時(shí)間主要包含兩個(gè)部分：頁面渲染時(shí)間=腳本執(zhí)行時(shí)間+瀏覽器引擎渲染時(shí)間其中：“腳本執(zhí)行時(shí)間”包含瀏覽器腳本執(zhí)行引擎解析和執(zhí)行腳本的時(shí)間，本文只討論JavaScript腳本。“瀏覽器引擎渲染時(shí)間”包含瀏覽器引擎渲染和顯示圖形界面UI的時(shí)間。不同的瀏覽器和瀏覽器版本有可能采用不同頁面渲染技術(shù)，其執(zhí)行效率和顯示行為有一定的差別，比如有些引擎在實(shí)現(xiàn)行為上進(jìn)行了優(yōu)化，使用戶能先看到部分被渲染完成的頁面，然后逐漸顯示后續(xù)的內(nèi)容，這部分對(duì)于引擎的技術(shù)差異不在這篇文章的討論范圍。對(duì)于一個(gè)設(shè)計(jì)良好的頁面，它在瀏覽器端的引擎渲染時(shí)間通常是固定且快速的，在這里我們不打算深入討論。Web2.0應(yīng)用中，越來越多的邏輯層和表現(xiàn)層的實(shí)現(xiàn)被轉(zhuǎn)移到瀏覽器端。對(duì)應(yīng)用本身，這樣不僅可以減輕服務(wù)器的負(fù)擔(dān)，并且能提供非常豐富的用戶體驗(yàn)，使應(yīng)用有非常好的可用性。瀏覽器端的頁面聚合特性，也使得服務(wù)器的架構(gòu)設(shè)計(jì)更加靈活，使應(yīng)用有更大的可擴(kuò)展性。而從應(yīng)用的性能角度來看，這勢(shì)必加重了頁面的渲染時(shí)間，過于差的頁面顯示延時(shí)，會(huì)嚴(yán)重影響用戶的體驗(yàn)。所以我們應(yīng)該認(rèn)識(shí)到應(yīng)用里面的腳本已經(jīng)變的很重要，而且可能成為應(yīng)用的性能瓶頸。為了提升腳本的執(zhí)行性能，首先需要開發(fā)者在設(shè)計(jì)和實(shí)現(xiàn)的時(shí)候把性能考慮進(jìn)去，同時(shí)也有一些成熟的JavaScript腳本編程的性能建議可供開發(fā)者作為參考（參見

參考資源），這可以幫助開發(fā)者在程序?qū)崿F(xiàn)或者從服務(wù)器端遷移代碼的時(shí)候避免調(diào)用一些在腳本執(zhí)行中性能比較差的方法或算法。有些時(shí)候，開發(fā)者并不能預(yù)測(cè)到代碼中可能存在的性能問題，這時(shí)候性能分析技術(shù)能提供一些性能剖析的方法和工具，幫助我們對(duì)一些方法或者代碼片段做性能剖析，從而分析內(nèi)部潛在的性能問題。在腳本語言中，主要的性能剖析方法有時(shí)間片剖析和調(diào)用流程剖析：時(shí)間片剖析：時(shí)間片剖析能記錄與統(tǒng)計(jì)一段時(shí)間內(nèi)各個(gè)方法被調(diào)用的次數(shù)以及占用的時(shí)間片長(zhǎng)度。它的結(jié)果通常能幫我們回答這些問題：“時(shí)間都花在哪些方法里了？”“誰用了最多的時(shí)間？”“每個(gè)方法被調(diào)用了多少次？”。調(diào)用流程剖析：調(diào)用流程剖析記錄一段時(shí)間內(nèi)每個(gè)方法的調(diào)用、退出以及它調(diào)用的子方法，同時(shí)記錄該方法消耗的時(shí)間。它的結(jié)果能顯示每個(gè)方法的調(diào)用流程與方法在這個(gè)堆棧所消耗的時(shí)間。它通常能幫我們回答這些問題：“是誰調(diào)用了這個(gè)方法？”，"這個(gè)方法都調(diào)用了哪些其他方法？”這兩個(gè)性能剖析方法包含兩個(gè)相同的步驟：數(shù)據(jù)搜集與數(shù)據(jù)后處理與分析，通過合適的工具，我們可以同時(shí)得到這兩個(gè)剖析結(jié)果。這個(gè)結(jié)果能幫我們回答我們最想知道的問題：”誰在調(diào)用運(yùn)行時(shí)間最長(zhǎng)的方法？“，這將毫無疑問的幫我們定位到應(yīng)用中存在的性能問題。回頁首JavaScript性能剖析工具目前許多瀏覽器都提供了適用于自身的性能剖析工具或者插件，不同的工具提供了不同的功能，能幫助我們?cè)诓煌瑸g覽器上進(jìn)行腳本執(zhí)行性能的分析。這里我們以MozillaFirefoxFireBug插件、MicroSoftInternetExporlor8與Webkit（Safari）WebInspector三個(gè)工具為例子比較他們?cè)诠δ苌系膮^(qū)別，見

表1。MozillaFireFoxFirebug插件：Firebug插件是一個(gè)很好的Firefox上的JavaScript開發(fā)與調(diào)試工具，這個(gè)插件也支持對(duì)JavaScript執(zhí)行做性能剖析。MicroSoftInternetExporlor8：從InternetExplorer8開始，瀏覽器默認(rèn)有“開發(fā)者工具”支持。可以通過“工具->開發(fā)者工具”或者按F12鍵激活。Webkit（Safari)WebInspector：Webkit開源項(xiàng)目發(fā)布的WebInspector工具可以很好的集成到AppleSafari瀏覽器中，并為AppleSafari瀏覽器提供JavaScript腳本開發(fā)、調(diào)試與性能剖析功能。

表1.JavaScript性能分析工具功能對(duì)比功能MozillaFirefoxFirebugInternetExplorerDeveloperToolsWebkit(Safari)WebInspector時(shí)間片剖析支持支持支持調(diào)用流程剖析不支持支持支持無關(guān)過濾不支持不支持不支持父子節(jié)點(diǎn)統(tǒng)計(jì)分析不支持不支持不支持離線分析不支持不支持不支持快速檢索不支持不支持不支持匹配匿名函數(shù)名部分支持支持不支持

回頁首分析剖析結(jié)果前面我們通過DeveloperToolsforInternetExplorer8（IE8）對(duì)IBMMashupsCenter的登錄動(dòng)作進(jìn)行了JavaScript性能剖析，下面我們來分析一下這個(gè)結(jié)果。通過“函數(shù)列表視圖”，我們很容易找到那個(gè)方法調(diào)用占用了最多的時(shí)間，或者被調(diào)用的次數(shù)最多。通過“調(diào)用流程樹視圖”，我們可以查找是哪些方法調(diào)用了那些最重的函數(shù)。被調(diào)用次數(shù)最多的函數(shù)：通常需要我們?cè)凇罢{(diào)用流程樹視圖”中看他們被調(diào)用的情況，調(diào)查是誰在調(diào)用這個(gè)方法。是不是設(shè)計(jì)要求被調(diào)用這么多的次數(shù)？或者是被包含在了一個(gè)不被預(yù)期的循環(huán)里。當(dāng)發(fā)現(xiàn)這類情況時(shí)，通常我們需要結(jié)合源程序看程序邏輯來判斷，一個(gè)常見的問題比如循環(huán)里面一個(gè)子函數(shù)調(diào)用總是返回相同的值，把這個(gè)子函數(shù)調(diào)用移動(dòng)到循環(huán)外面可以提高性能。包含子方法的時(shí)間占用最多：通常需要我們同時(shí)考慮不包含子方法的時(shí)間的占用情況。如果不包含子方法的時(shí)間比較小，那就是它的方法占用了大部分時(shí)間，需要在“調(diào)用流程樹視圖”里查找其調(diào)用的子函數(shù)。不包含子方法的時(shí)間占用最多：通常我們需要結(jié)合該方法的被調(diào)用次數(shù)來計(jì)算平均時(shí)間。如果單次平均時(shí)間比較小，那表示這個(gè)方法被調(diào)用的次數(shù)太多，需要我們考慮如何減少調(diào)用次數(shù)。如果單次平均時(shí)間比較大，那就需要結(jié)合源程序去優(yōu)化程序的結(jié)構(gòu)或者算法。在我們對(duì)IBMMashupsCenter的登錄動(dòng)作的性能剖析結(jié)果中，我們可以發(fā)現(xiàn)：在

函數(shù)列表視圖

中，函數(shù)“changePageContent”內(nèi)部占用了超過45%的時(shí)間，這是不包括子方法的時(shí)間。我們需要進(jìn)一步了解是誰在調(diào)用這個(gè)方法，以及它為何會(huì)占用這么多的時(shí)間。然后，我們切換到

調(diào)用流程樹視圖，開始查找這個(gè)占用時(shí)間最多的函數(shù)它在JavaScript調(diào)用堆棧里的位置，最后我們找到了它的上下文關(guān)系。如圖3所示：

圖3.示例：changePageContent函數(shù)在調(diào)用流程樹視圖中的位置

根據(jù)圖3指示的上下文關(guān)系，我們可以得到幾個(gè)相關(guān)的函數(shù)名稱，以及它們之間的調(diào)用關(guān)系。從初步判斷，我們可以理解為JavaScript腳本在處理Mashupspage的內(nèi)容更新與渲染。如果需要進(jìn)一步分析，需要結(jié)合JavaScript的源碼來進(jìn)行進(jìn)一步的分析。通過以上的性能剖析，已經(jīng)能夠幫助我們找到頁面JavaScript腳本執(zhí)行在各個(gè)函數(shù)中的分布以及它們的上下文關(guān)系。對(duì)于比較復(fù)雜的JavaScript腳本性能問題，通常需要結(jié)合源