性能測試指標說明V10

中企動力科技股份有限公司網(wǎng)頁（組件）性能評測指標說明網(wǎng)頁速度評測指標2011-12-23評測網(wǎng)頁（組件）現(xiàn)實速度的主要指標，從這些指標可以量化頁面加載現(xiàn)實時間，作為頁面（組件）選型優(yōu)化的指標。目錄TOC\o"1-5"\h\z概述3網(wǎng)站性能提高的方向.錯誤！未定義書簽。1影響客戶端性能的因素3\o"CurrentDocument"1.1首次加載時間3\o"CurrentDocument"1.2頁面首次渲染時間4\o"CurrentDocument"1.3渲染結(jié)束時間5\o"CurrentDocument"1.4客戶端JS執(zhí)行總時間5\o"CurrentDocument"1.5客戶端JS執(zhí)行結(jié)束時間61.6onLoad事件6\o"CurrentDocument"1.7頁面完全加載7\o"CurrentDocument"1.8總請求數(shù)8\o"CurrentDocument"1.9頁面加載大小8\o"CurrentDocument"1.10異步請求數(shù)量92服務(wù)器端性能測試指標9\o"CurrentDocument"dns查詢的時間9\o"CurrentDocument"2.2連接時間10\o"CurrentDocument"2.3ServerTime10\o"CurrentDocument"2.4傳輸時間10\o"CurrentDocument"2.5等待時間11\o"CurrentDocument"2.6多域名訪問11\o"CurrentDocument"Dynatrace的介紹11\o"CurrentDocument"Timeline視圖進一步查看頁面生命周期事件12\o"CurrentDocument"purePath視圖解決javascript、dom和ajax的問題12\o"CurrentDocument"Network視圖12\o"CurrentDocument"Hotspot視圖最慢最影響性能的地方在哪里？13\o"CurrentDocument"Watir集成dynaTrace實現(xiàn)自動化測試簡介13

HTTP請求圖示名詞解釋KPIKeyPerformanceIndicators（關(guān)鍵性能指標）1客戶端KPI1.1首次加載時間點?瀏覽器首次加載時間點?單位：毫秒?定義（含義）：瀏覽器首次加載時間?用途：排除服務(wù)器端因素。?測試工具：dynaTrace?測試方法：dynaTrace記錄時間點TimeLine視圖Pagehttp://localhost：8180/test/scripts/test/richGrid/Cext/RichGrCFV——_一JavaScript—I■IIIIIIIIIIIRenderingHetvork10C：dlhi：iEtII|U首淺:加載時間點1.2頁面首次渲染時間點名稱：頁面首次渲染時間點（TimetoFirstImpression）?單位：毫秒定義（含義）：表示從用戶在瀏覽器地址鍵入url按下回車鍵開始到頁面開始有反應(yīng)（用戶可以在頁面中看見一點點內(nèi)容）為止。經(jīng)常能感覺到的一個信號就是網(wǎng)頁開始顯示title。IE下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時進行的。在渲染到頁面的某一部分時，其上面的所有部分都已經(jīng)下載完成（但并不是說所有相關(guān)聯(lián)的元素都已經(jīng)下載完。）在下載過程中，如果遇到某一標簽是嵌入文件，并且文件是具有語義解釋性的（例如：JS腳本，CSS樣式），那么此時IE的下載過程會啟用單獨連接進行下載。并且在下載后進行解析，解析（JS、CSS中如有重定義，后定義函數(shù)將覆蓋前定義函數(shù)）過程中，停止頁面所有往下元素的下載。樣式表文件比較特殊，在其下載完成后，將和以前下載的所有樣式表一起進行解析，解析完成后，將對此前所有元素（含以前已經(jīng)渲染的）重新進行樣式渲染。并以此方式一直渲染下去，直到整個頁面渲染完成。用途：如果html頁面是純html標簽構(gòu)成此KPI表示頁面可見，非白板的開始時間點?測試工具：dynaTrace記錄時間點?測試方法：dynaTrace查看首次渲染的時間Timeline視圖二SufTim:ii-y〔B)%Caching(F)|B]Network(A)ofj?Server-Sidel：A)=Jav：aScript.r1AJAJ{(A)Timeline口KFTs虱蟻a|［詈］可同-Fagehttp://localhost：8180/test/scrCPUJavaScriptip+s/test/richGrid/EUI/Grid.htrjil:IqLViIRenderingII:!11VetvorkEventsH-H11111111111111iii|iiiiiiiii(1111111111111111111111111111:imimumi樸i1111111111111111?「111111111||1100ms200ms300ms400ms500ms600msTOOms800ms900ms1000ms通過Rendering視圖查看頁面渲染的時間和過程1.3渲染結(jié)束時間點?名稱：渲染結(jié)束時間點?單位：毫秒?定義（含義）：頁面最終呈現(xiàn)給用戶時間點?用途：最重要的KP/，記錄渲染結(jié)束點用戶可正常使用網(wǎng)頁?測試工具：dynaTrace?測試方法：dynaTrace記錄時間點Timeline視圖Pagehttp：//localhost:8080/m：=LrL：±ge/scripts/test/tin-eeCalerLii：=Lf/ElH/：ilend：=Lr.htmlCPU1JavaScriptII11|Rendering)Vetvork1localhgt|||Q||lEvents最后一個渲染活動結(jié)束1.4客戶端JS執(zhí)行總時間總和?名稱：客戶端JS執(zhí)行總時間總和

?單位：毫秒?定義(含義)：客戶端JS執(zhí)行總時間總和?用途：1、了解JS性能2、是產(chǎn)生渲染結(jié)束時間長主要原因之一(還包括css樣式、dom結(jié)構(gòu))?測試工具：dynaTrace?測試方法：dynaTrace記錄時間FindallKeyPerformanceIndicators(KPI)fortheselectedpageThesevalueshelpyouconearewithotherversionsofthemqtpagetoidentifyprotlessorresressions.LmarnF'e”cuariEndXatcrmandhowtheygetcalculated.FSrwtJ^ecfuesf248bsi2nSert-er25bs眼.2?s□VetitvrJc108bsJptajfSj'^e257kbJjiyjT-essj'pxi：1128asOnCJjbjjt520bsiTcuine.t5?s\J~3PaSej~jj}t521阡)冀\)fj^PCidP^tpaQrjrj.we1128*5&ZnteracreObsTr-ansfej-38*e■iEejioferj—g49bTimespentexecutingJavaScriptcode|j'ptai'pac!j1j'we1130bs日gtlas1.5客戶端JS執(zhí)行結(jié)束時間點名稱：客戶端js執(zhí)行結(jié)束時間點單位：毫秒?定義（含義）：客戶端JS執(zhí)行結(jié)束時間點用途：了解JS性能測試工具：dynaTrace測試方法：Fagehttp：//localhost:8080/m：=Lri：=ige/ecrip+e/test/+tii-eeC：=J.end:=q_/El.RE/yij-Calend:=Lt_.h+mlJavaScriptII^MIIJRenderingJavaScriptII^MIIJRendering/Vetwork/:1uC：dlhciSt■1II/'Events/1.1*/「CPU關(guān)閉i劉覽器時，響應(yīng)鼠標事件1.6onLoad時間點?名稱：onload時間點(TimetoonLoadEvent)?單位：毫秒?定義（含義）：表示從頁面開始顯示內(nèi)容，到瀏覽器開始觸發(fā)OnLoad函數(shù)這一時間段。只有當初始的文本和所引用的對象加載完成，瀏覽器才開始觸發(fā)OnLoad函數(shù)?用途：通過延遲加載圖片、JS提高用戶體驗?測試工具：dynaTrace記錄時間點Pagehttp://loc：dlhost:8080/rri：=LTiage/scripts/test/+hcfeeCalerLd：=ir/El.r[/pjHZ：=ilend：=Lt_.htmlCPUJavaScriptIIIII'1Rendering:Metvork■圖片下載完閉iiio(OEventsfirstinpressionafter1.12sloadeventafter1.12s1.7頁面完全加載時間點名稱：頁面完全加載時間點（TimetoFullyLoaded）?單位：毫秒?定義（含義）：完成延遲加載和JS動態(tài)渲染的時間用途：3、了解JS動態(tài)渲染的性能4、延遲加載需要的時間測試工具：dynaTrace?測試方法：dynaTrace記錄時間吸@Q|［言［刨|(zhì)［?］章［尊］多。Page~http://localhost：8180/teEt/scripts/teEt/richGrid/^Zext/RichGrid.htmlcrv—■■一;JavaScriptl］|IIRenderingn;Vetwork11_；_rh面完1DC：dlhuEtm'Einnimui.±加載Events■匚1.8總請求數(shù)名稱：總請求數(shù)（TotalNumberofRequests）?單位：個數(shù)定義（含義）：頁面完成加載后的所有http請求數(shù)量?用途：減少http數(shù)量提高網(wǎng)站性能和查看瀏覽器狀態(tài)碼測試工具：dynaTrace測試方法：dynaTrace或者firebug查看請求數(shù)量HTTP請求時間消耗是很大的，因此使用HTTP請求來獲得一個沒有用處的響應(yīng)（例如404沒有找到頁面）是完全沒有必要的，它只會降低用戶體驗而不會有一點好處。有些站點把404錯誤響應(yīng)頁面改為''你是不是要找***〃，這雖然改進了用戶體驗但是同樣也會浪費服務(wù)器資源（如數(shù)據(jù)庫等）。最糟糕的情況是指向外部JavaScript的鏈接出現(xiàn)問題并返回404代碼。首先，這種加載會破壞并行加載；其次瀏覽器會把試圖在返回的404響應(yīng)內(nèi)容中找到可能有用的部分當作JavaScript代碼來執(zhí)行。Indicators(KPI)fortheselectedpageioilsofthesamepaeetoidentif7prob1emeorreereseiotle.howtheygetca1culated.Obs1198bsTotal2721kbtpjinect1T6bs而商"r/pt3524bs榮上/屁giires1!2瓦＞jlrans/e-T448bej^e-nu^-Ti-ng-35Tbe#廿廓1.9頁面加載大小名稱：頁面加載大?。═otalSizeofWebSite）單位：KB?定義（含義）：構(gòu)成網(wǎng)頁元素總的大小。圖片或者JS庫的增加都會對下載時間造成重要的影響。用途：了解頁面加載大小，從而減小加載速度?測試工具：dynaTrace和firebug測試方法：dynaTrace查看html元素的大小firebug查看所有資源的大小Dynatrace測試結(jié)果Findal1KeyPerformanceIndicators(KPI)fortheselectedpageThesei.ralneshe1pyoucornparewithotheri.rersionsofthesamepaeetoL白arri.EQ。白utlK白yF亙rfurmarLC：亙Iruli」a.tQr，andhuurthey巳亙tc：±1culated.identif7prob1emeorreereseions.舟―三tTi如Se_r[-re_rObsjVe1198bs《丑函2T21kbfjrstJ5叩r日三3015bs如CJj'ejit3460bsCpnnect176bsJ~a^ra^crj_pt3524.m#pT~3^?Ef55CZ?—丁fmp3t?-Tnter-actOijransfej-448bsA\es]uej-jng：357?s#of￡町jrptaiZp3uj14443h日盼t19■-1.10異步請求數(shù)量?名稱：異步請求數(shù)量（TotalNumberofXHRRequests）?單位：個數(shù)?定義（含義）：通過ajax異步從服務(wù)器端獲得數(shù)據(jù)的請求數(shù)。通過配置可以減少XHR請求的數(shù)目?用途：減少異步請求的數(shù)量提高網(wǎng)站的性能?測試工具：dynaTrace、firebug?測試方法：使用firebug查看蛆清除保持所有HTMLCSSJSIXHRI圖片F(xiàn)lash媒體URL袱看?太小RemoteIP田PO5Tannounce.do?met200OKmake.zshoplS37B17:80田GETeKt-base.js200OKmake.zshoplE13.1KB17:80?GETeHt-all.js蛆清除保持所有HTMLCSSJSIXHRI圖片F(xiàn)lash媒體URL袱看?太小RemoteIP田PO5Tannounce.do?met200OKmake.zshoplS37B17:80田GETeKt-base.js200OKmake.zshoplE13.1KB17:80?GETeHt-all.js200OKmake.zshoplS206.6KB17:80?GETceKt-all.js200OKmake.zshoplS128.9KB17:130EGETinitParam.js200OK245B17:80?GETzshop-partl.js200OKmake.zshoplS176.5KB17:130EGETzshop-part2.js200OK151.1KB17:80?GETzshop-part3.js200OK169.7KB17:80田GETzshop-part4.js200OKmake.zshoplS103KB17:80?GETSSO.js200OK1.1KB17:80EPOSTproduct_config.dc200OKmake.zshoplS426B17:80?GETproduct_stock.do?i200OKmake.zshoplS39B17:130EPOSTproduct_config.dc200OK426B17:8013個甫求951.1KBI15ms3S0rri5I16msI15rns2s(onload:4.37s)dns查詢的時間。網(wǎng)頁請求會產(chǎn)生一次尋找該網(wǎng)頁資源所在主機的dns查詢。在同個域名進行網(wǎng)頁切換不會造成新的dns查詢。?用途：通過優(yōu)化dns提高網(wǎng)站訪問速度測試工具：dynaTrace?測試方法：dynaTrace記錄時間點2.2連接時間名稱：連接時間（ConnectTime）單位：毫秒?定義（含義）：指瀏覽器和服務(wù)器之間建立tcp/ip連接的時間，對于ssl連接包括握手的時間。網(wǎng)絡(luò)連接過慢、使用ssl、使用短連接而非常連接都是造成connecttime較多的原因。用途：測試工具：dynaTrace?測試方法：dynaTrace記錄時間點2.3ServerTime名稱：ServerTime單位：毫秒定義（含義）：請求服務(wù)器獲取結(jié)果的時間用途：測試工具：dynaTrace?測試方法：dynaTrace記錄時間點2.4傳輸時間名稱：傳輸時間（TransferTime）單位：毫秒定義（含義）：請求服務(wù)器獲取結(jié)果的時間?用途：?測試工具：dynaTrace?測試方法：dynaTrace記錄時間點2.5等待時間名稱：等待時間(WaitTime)?單位：毫秒定義(含義)：等待時間和同一個域中服務(wù)資源的數(shù)量直接相關(guān)。每個域的瀏覽器的物理網(wǎng)絡(luò)的限制，導(dǎo)致資源等待可用的連接。減少資源的數(shù)量，或?qū)①Y源散布在不同的域，能將這一時間降低。平均等待時間的大小更能反映等待時間是否需要注意。用途：測試工具：dynaTrace?測試方法：dynaTrace記錄時間點2.6多域名訪問名稱：多域名(NumberofDomains/SingleResourceDomains)單位：毫秒定義(含義)：部署網(wǎng)站資源的域主機數(shù)量是很重要的，因為它影響的DNS，連接和等待時間。專門用戶資源下載的域是必要的，他將直接減少等待時間。應(yīng)避免單一的資源域，否則你將為dns查詢以及資源下載付出昂貴的代價。用途：測試工具：dynaTrace測試方法：dynaTrace記錄時間點3Dynatrace的介紹DynaTraceAJAX是一個運行在IE瀏覽器下的免費頁面性能分析工具，它可以支持主流的IE6、IE7、IE8瀏覽器及FireFox某些版本。這款工具正是DynaTrace為進入前端性能分析領(lǐng)域而發(fā)布的。您可以利用它來分析頁面渲染時間、DOM方法執(zhí)行時間，甚至可以看到JS代碼的解析時間。在dynaTrace網(wǎng)站，我們看到我們的客戶跟業(yè)界一樣，將以瀏覽器和運行時(Javascript、DOM)為基礎(chǔ)的Web應(yīng)用作為其應(yīng)用平臺。那些新興的框架，像jQuery、GWT、YUI、Dojo等，讓構(gòu)建web2.0應(yīng)用越顯輕松一一旦是，也越來越難以確認應(yīng)用中的問題到底是功能性的，還是與性能相關(guān)的。即便是在企業(yè)環(huán)境中，排名第一的仍然是IE瀏覽器。IE的診斷工具在涉及問題分析時，常會給開發(fā)和測試人員帶來痛苦。在Web2.0/Ajax應(yīng)用中所面對的挑戰(zhàn)不僅是要了解網(wǎng)絡(luò)交互（有多少資源以及什么時候載入），而且要了解這些交互是如何影響性能的。該問題所涉及的領(lǐng)域已經(jīng)延伸到JavaScript、XmlHttpRequests、DOM操作、框架、布局和渲染。dynaTraceAjax版的來臨即可解決這類問題，以幫助用戶了解是什么原因?qū)е卢F(xiàn)代Ajax應(yīng)用中出現(xiàn)性能和功能問題3.1Timeline視圖進一步查看頁面生命周期事件SSiuTim:ai-yl：B)Caching昌Network(A.)|Server-Side(A)|ipt/AJAJi(A)號Tinielirie0KTTW及@QI值向您Jo也多。Pagehitp://Iocalhost:81SO/test/scripts/test/richGrid/EUlj/Grid.html:CPVJavaScript■11DRendering■1II—Vetvork1iloc：alhostiIllillllllII:Events111111111111111111i11111111111111111111111111111111111111111111111111111111】111111111111111111111111111111111111111111111|-H100ms200ms300ms400ms500ms600msTOOms80Ums900ms1000ms1100ms1200ms3.2purePath視圖解決javascript、dom和ajax的問題在purePath視圖中我們可以更深一層的了解瀏覽器和網(wǎng)絡(luò)的活動，了解哪些JS被真正的執(zhí)行，誰觸發(fā)了XHR請求。TimeC...▲StartT...Dm-atio...JS[ms]CPUTim...Size1Activit...DetailsA0.0010.39-ITetworkhttp://Ioc:ilhozt：8180/1eet/ecri10.01101.58-Networkhttp://localhost：8180/test/widg0.0116.25-Networkhttp://Ioc:dlhoet：8180/test/scri0.OS-19.55-Networkhttp:.//lo>2:dlh>:>st：8180./test/etylCI.0221.20-Networkhttp://Iocalhost：8180/test/widg0.03159.71Networkhttp:/./loc:alhost：8180/1eet.r1wida0.0321.32Networkhttp://Ioc:dlhoet：8180/test/widg0.0380.85Networkhttp:.//loc:dlh>:>st：8180/test/widg0.0473.60-Networkhttp://localhost：8180/test/widg10.0474.12Networkhttp://Ioc:ilhost：8180/1est/scri0.110.600.090.00■4Jav：aScriptCscript.)■0.1216.1720.215RenderingRenderingactivitieer~0.13649.939.1315.62283JaviiScript■Gcriptsi->2='vhttp:/./l>:>>2:alhnst：E0.19407.20133.03140.621601JavaScript^scriptsrc=^http://localhost:80.582.110.700.0015Jav：aScript(ecriptzrc="http://loc：±lhost：E0.580.690.200.005Jav：aScriptcriptErc="http://loc：ilh口st：E0.581.380.6715.6227Jav：aScriptcriptErc="http://loc：ilh口st：E-JLI±ContributorInvocationsStackElementTut：al.eui-richgrid-headsettingct{NetwurkRequhet1(^NetworkRequest1height.:20px;positi□n:ahso1ute;right:u;J—_虹—』>top:lpx;Contributors站工distribution口二:二叵二Z：二112il±12J3.3Network視圖Network視圖顯示了在整個瀏覽器session內(nèi)或不同頁面內(nèi)的所有網(wǎng)絡(luò)請求。在左邊樹形主菜單中通過雙擊Network節(jié)點可以打開Network視圖

UELCa...KindSt...MIMEhttp://Ioc：dlhost：8180/test/scripts/test/richGrid/Cent/RichGrid.htmlnoNet200OKtest/htrnlhttp:J/1ocalh口st：81日□./tes1/widgets.i1'extjs.i1'3.2.1Jresom_ces/ces/e:<cesnoNet200OKtest/csehttp:J/1oc:alhost：8180.I'1test/widgets.i1'cent.r11.1.1/resourcez.i'1cse/ce:<cesnoNet200OKtest/csehttp:.i1'/1oc:alhost：8180/test/ecripte/demo.i'1en：ajTiples.ceenoNet200OKtent/ceehttp:/1>:>st：818U.I'1test/widgete./entje./3.2.1./adapter/ei:ty1ei:t-base-debug,j，n>:>Net200OKteKt/javascripthttp://Ioc：dlhost：8180/test/widgets/eiztjs/3.2.1/eizdebug,jsnoNet200OKtest/javascripthttp://Ioc：dlhost：8180/test/widgete/estje./3.2.1/Ioc：±1e.r11:ing-zh_CN.jznoNet200OKtest/javascripthttp：.i,l.i,lloc：dlhost：8180/test/widgete/cent/1.1.1/cendebug,jenc，Net200OKtest/javascript1httpc:dlh>:>st：8180/test./e>zripte/test/richGrid/Cent/ri-zhgi-id.jen>:>Net200OKtbkt/javas■:ripthttp：//localhost：8180/￡avicon.iconoNet200OKhttp://localhost：8180/test/widgets/extjs/3.2.1/resources/images/default/pieltlhIj'...noNet200OKimage/gi￡http://localhost：8180/test/widgets/extje/3.2.1/resources/images/default/toolba...noHet200OKimage/gi￡http://localhuEt：8180/test/widgets/extje/3.2.1/reEources/images/default/grid/g...noNet200OKimage/gi￡http：//localhost：8180/test/widgets/eKtjs/3.2.1/resources/images/default/grid/r...noNet200OKimage/gifhttp:j-1/1oc：alhost：81SO.i'1test/widgets.i1'eiztjs.i1'3.2.1j1'resom_ces/images/default.i'1gi_id.r1g...noNet200OKimage/gifhttp:j-1/1oc：alhost：81SO.i'1test/widgets.i1'ezctjs.i1'3.2.1j1'resom_ces/imagee/default.i'1dd.r1dr□...noNet200OKimage/gifhttp:.i-1/1oc:alhoet：8180/test/widgete/entje/3.2.l/reEoui'ceE./imageE.i'1default.i'1gi_id/c...noNet200OKimage/gifhttp:.i-1/1oc:alhoet：8180/test/widgete/entje/3.2.l/reEoui'ceE./imageE.i'1default.i'1gi_id/c...noNet200OKimage/gifhttp://I>:>st：818U.I'1test/widgete/>:它kt/1.1.1/resom-■:ee/imagee/de￡ault./butt.n>:>Net200OKimage./gi￡http://localhost：8180/test/widgets/cext/1.1.1/resources/images/default/grid/gr...noNet200OKimage/pnghttp://localhost：8180/test/widgets/extje/3.2.1/resources/images/default/form/1...noHet200OKimage/gi￡http:.i-1/1oc:alhoet：8180/test/widgete/entje/3.2.l/reEoui'ceE./imageE.i'1default.i'1form.i'11...noNet200OKimage/gifhttp://I>:>■:et：81SU.i-1test/widgete/entje/3.2.1/ree■:>m_■:ee./imagee/defai￡Lt/button...n>:>Net200OKimage./gi￡K++Tb■.i1.■*1rii-?olKrtt'R1HI1j1+ot+/wiA=4+u/av+ic.i1'-!1』vqucllqu/imo-rau」a『?Til+f<r￥i14/Tb9FIFInr,imo-ra/f皿….一一，］>3.4Hotspot視圖最慢最影響性能的地方在哪里?Contributor|APIInvocationsExec[%