在開(kāi)發(fā)大型Web應(yīng)用或復(fù)雜交互的網(wǎng)站，不免會(huì)遇到一些頁(yè)面性能瓶頸的問(wèn)題。本篇介紹一下如何利用Chrome的性能面板分析網(wǎng)站的性能瓶頸，應(yīng)該對(duì)你有所幫助。
注意，為了減少一些Chrome插件對(duì)性能評(píng)估產(chǎn)生噪音，最好打開(kāi)隱身模式訪問(wèn)頁(yè)面進(jìn)行測(cè)試。
將Chrome切換到隱身模式，然后打開(kāi)該頁(yè)面進(jìn)行測(cè)試： https://googlechrome.github.io/devtools-samples/jank/
模擬移動(dòng)設(shè)備
與臺(tái)式機(jī)和筆記本電腦相比，移動(dòng)設(shè)備的CPU配置要遜色不少，所以我們測(cè)試的時(shí)候通常會(huì)模擬移動(dòng)設(shè)備進(jìn)行測(cè)試：
- 點(diǎn)擊
Network按鈕 將網(wǎng)絡(luò)切換成Fast 3G，此時(shí)網(wǎng)速為正常的3G - 點(diǎn)擊
CPU throttling按鈕 將CPU設(shè)置為2x slowdown，此時(shí)CPU的運(yùn)行比平時(shí)慢2倍
演示步驟
點(diǎn)擊 "Add10"，藍(lán)色方塊的移動(dòng)會(huì)逐漸變慢（在高端計(jì)算機(jī)上，可能需要大約20次點(diǎn)擊）
點(diǎn)擊 "Optimize"觸發(fā)優(yōu)化，藍(lán)色方塊移動(dòng)會(huì)變快，且頁(yè)面明顯變得流暢
注意：如果在優(yōu)化和未優(yōu)化的版本之間看不到明顯的區(qū)別，請(qǐng)嘗試單擊 " Subtract10" 幾次，然后重試。如果添加了太多的藍(lán)色方塊，則只會(huì)使CPU占用巨大內(nèi)存，而不會(huì)看到兩個(gè)版本的結(jié)果有重大差異。
- 點(diǎn)擊 "Un-Optimize" 取消優(yōu)化。藍(lán)色方塊的移動(dòng)速度會(huì)立即變慢，頁(yè)面也明顯變得卡頓
記錄運(yùn)行時(shí)性能
當(dāng)頁(yè)面激活 Optimize 時(shí)，藍(lán)色方塊移動(dòng)得更快。這是為什么？其實(shí)兩種版本都應(yīng)在相同的時(shí)間內(nèi)將每個(gè)正方形移動(dòng)相同的空間。我們可以在“性能”面板中進(jìn)行錄制，借以了解如何檢測(cè)未優(yōu)化版本中的性能瓶頸。
- 在DevTools中，單擊 記錄 按鈕。當(dāng)頁(yè)面運(yùn)行時(shí)，DevTools開(kāi)始捕獲性能指標(biāo)
捕獲性能 - 等待十幾秒鐘
- 點(diǎn)擊 停止 按鈕，DevTools停止記錄，處理數(shù)據(jù)，然后在 "性能" 面板上顯示結(jié)果
分析結(jié)果
記錄了頁(yè)面的性能后，就可以衡量頁(yè)面的性能究竟如何，我們可以對(duì)此進(jìn)行分析：
每秒分析幀
衡量任何動(dòng)畫性能的主要指標(biāo)是每秒幀數(shù)（FPS）。當(dāng)動(dòng)畫以 60 FPS 運(yùn)行時(shí)頁(yè)面是最流暢狀態(tài)
- 查看FPS圖表。每當(dāng)您在FPS上方看到紅色條形時(shí) ，表示幀速率下降得很低，以至于可能影響到用戶體驗(yàn)。通常，綠色條越高，F(xiàn)PS越高。
- 在FPS圖表下方是CPU圖表中相應(yīng)的顏色CPU圖表，在性能板的底部是對(duì)應(yīng)于顏色摘要選項(xiàng)卡。CPU圖表充滿色彩的事實(shí)意味著在記錄過(guò)程中CPU已滿。每當(dāng)您看到CPU長(zhǎng)時(shí)間處于工作狀態(tài)時(shí)，就可以找到減少工作量的方法。
- 將鼠標(biāo)懸停在FPS，CPU或NET圖表上。DevTools將顯示該時(shí)間點(diǎn)的頁(yè)面截圖。左右移動(dòng)鼠標(biāo)以重播錄音。這稱為“擦洗”，對(duì)于手動(dòng)分析動(dòng)畫的進(jìn)度很有用。
- 在 "Frames" 部分中，將鼠標(biāo)懸停在綠色方塊之上。DevTools就會(huì)顯示該特定框架的FPS，每幀可能遠(yuǎn)低于60 FPS的目標(biāo)。
當(dāng)然，通過(guò)此演示，很明顯發(fā)現(xiàn)這個(gè)頁(yè)面效果不佳。但是究竟哪一部分有性能問(wèn)題可能還不是很清楚，因此需要使用該工具進(jìn)行精確分析和測(cè)量。
打開(kāi)FPS儀表盤
再介紹一個(gè)FPS測(cè)量?jī)x工具，它可以在頁(yè)面運(yùn)行時(shí)提供FPS的實(shí)時(shí)估算值
- 輸入
Command+ Shift+ P打開(kāi)命令菜單 - 輸入
Rendering，選擇Show Rendering - 在渲染選項(xiàng)卡，勾選 "FPS meter"按鈕，會(huì)在頁(yè)面上調(diào)出 FPS 面板
尋找性能瓶頸
已經(jīng)知道了頁(yè)面性能不佳，并獲取了性能分析圖，我們就需要進(jìn)一步循序性能瓶頸：
- 注意看下面的 Summary 選項(xiàng)卡。如果未選擇任何事件，則此選項(xiàng)卡顯示活動(dòng)的系分圖。從圖上看顯然是 在渲染上花了大把時(shí)間。由于性能是減少工作量的藝術(shù)，因此我們要做就是 想辦法減少渲染工作上時(shí)間。
- 展開(kāi)** Main** 部分，顯示了主線程隨時(shí)間變化的活動(dòng)圖表：
- x軸表示一段時(shí)間內(nèi)的記錄，每個(gè)條形代表一個(gè)事件。較寬的條形表示該事件花費(fèi)了更長(zhǎng)的時(shí)間。
- y軸表示調(diào)用堆棧。如果看到事件相互疊加時(shí)，表示較高的事件導(dǎo)致較低的事件
- Screenshots 軌跡記錄了每一幀的數(shù)據(jù)，在“概述”上拖動(dòng)鼠標(biāo)來(lái)放大單個(gè)“觸發(fā)動(dòng)畫”事件，該概述是包括 FPS，CPU和NET圖表的部分。Main 部分和 Summary 選項(xiàng)卡僅顯示記錄中所選部分的信息
注：另一種調(diào)試方法通過(guò)鍵盤上的 A鍵（選區(qū)軌跡坐移）、D鍵（選區(qū)軌跡右移）、W鍵（縮小選區(qū)）、S鍵（增大選區(qū)）
- 請(qǐng)注意 Animation Frame Fired 事件右上角的紅色三角形。每當(dāng)看到紅色三角形時(shí)，都會(huì)警告您性能問(wèn)題可能與此事件有關(guān)
注意：每當(dāng)執(zhí)行回調(diào)時(shí)，都會(huì)發(fā)生“ 觸發(fā)動(dòng)畫幀” 事件
requestAnimationFrame()
- 單擊 Animation Frame Fired 事件?，F(xiàn)在，Summary 選項(xiàng)卡向您顯示有關(guān)該事件的信息。注意顯示鏈接。單擊該按鈕將使DevTools突出顯示啟動(dòng)了 Animation Frame Fired事件的事件。還要注意
app.js:94的源碼鏈接。單擊可跳轉(zhuǎn)至源代碼中的相關(guān)行：
注意：選擇事件后，使用箭頭鍵選擇它旁邊的事件
在
app.update事件下，有一堆紫色事件。如果它們更寬，則看起來(lái)每個(gè)對(duì)象上可能都有一個(gè)紅色三角形。單擊紫色的Layout事件中的一個(gè)，DevTools在 Summary 選項(xiàng)卡中提供有關(guān)事件的更多信息。確實(shí)，上面有關(guān)于強(qiáng)制回流的警告（換句話說(shuō)，就是布局）在 Summary 標(biāo)簽中，點(diǎn)擊強(qiáng)制布局下的
app.js:70源碼鏈接，DevTools帶您進(jìn)入強(qiáng)制布局的代碼行
注意：此代碼的問(wèn)題在于，在每個(gè)動(dòng)畫幀中，它都會(huì)更改每個(gè)正方形的樣式，然后查詢頁(yè)面上每個(gè)正方形的位置。由于樣式已更改，因此瀏覽器不知道每個(gè)正方形的位置是否已更改，因此必須重新布局正方形才能計(jì)算其位置。請(qǐng)參見(jiàn) Avoid forced synchronous layouts
分析優(yōu)化版本
使用上面介紹的工作流程和工具，我們接下來(lái)點(diǎn)擊頁(yè)面上的 Optimize 按鈕，頁(yè)面切換到優(yōu)化版本，此時(shí)再調(diào)用一次性能面板，然后對(duì)結(jié)果進(jìn)行分析，我們可以看到該應(yīng)用程序的優(yōu)化版本所做的工作少得多，從而提高了頁(yè)面運(yùn)行性能。
注意：即使這個(gè)“優(yōu)化”版本也不是那么好，因?yàn)樗匀豢梢圆倏vtop每個(gè)正方形的屬性。更好的方法是堅(jiān)持只影響合成的屬性。有關(guān)更多信息，請(qǐng)參見(jiàn) Use transform and opacity changes for animations。
參考文獻(xiàn)
- Get Started With Analyzing Runtime Performance by Kayce Basques
本文由博客一文多發(fā)平臺(tái) OpenWrite 發(fā)布！
