1、performance頁(yè)面性能分析
本文將介紹如何使用chrome devTool的performance來(lái)對(duì)頁(yè)面進(jìn)行性能分析
（1）操作過(guò)程
1、進(jìn)入匿名模式保證分析結(jié)果少收到其他插件的干擾（windows可使用快捷點(diǎn) ctrl + shift + N）
2、確保screenshots checkbox是選中的，然后點(diǎn)擊controls，開(kāi)始記錄（windows快捷鍵 shift + E），這時(shí)候Devtools就開(kāi)始錄制各種性能指標(biāo)，你可以點(diǎn)擊頁(yè)面等進(jìn)行各種操作，所有的操作都會(huì)被瀏覽器錄制下來(lái)。錄制期間，?可以點(diǎn)擊stop進(jìn)行快速操作結(jié)束錄制，然后等待顯示性能報(bào)告，stop按鈕位置如下圖：
（2）分析報(bào)告說(shuō)明
先放上測(cè)試?yán)龍D：
1、首先我們將上面的示例圖進(jìn)行拆分成三部分，1、上面部分是動(dòng)畫(huà)記錄條，2、統(tǒng)計(jì)細(xì)節(jié)展開(kāi)區(qū)域，3、統(tǒng)計(jì)結(jié)果匯總區(qū)域
2、細(xì)節(jié)說(shuō)明
? ? ? a、FPS(幀率)在最上方動(dòng)畫(huà)記錄區(qū)域可以看到完整的圖。綠色豎線(xiàn)越高，F(xiàn)PS越高，紅色的話(huà)表示長(zhǎng)時(shí)間幀，很可能會(huì)出現(xiàn)卡頓，所在測(cè)試的時(shí)候要特別注意紅色部分
? ? ? b、CPU,在動(dòng)畫(huà)記錄區(qū)域可以看到完整的圖。
? ? ? c、NET(網(wǎng)絡(luò)請(qǐng)求)，在動(dòng)畫(huà)記錄區(qū)域可以看到完整的圖，每條色彩橫線(xiàn)表示一種資源，越長(zhǎng)表示檢索資源所需的時(shí)間越長(zhǎng)。每條橫線(xiàn)淺色的地方表示等待的時(shí)間
? ? ? d、統(tǒng)計(jì)報(bào)表說(shuō)明：
? ??????????藍(lán)色(Loading)：網(wǎng)絡(luò)通信和HTML解析
? ??????????黃色(Scripting)：JavaScript執(zhí)行
? ??????????紫色(Rendering)：樣式計(jì)算和布局，即重排
? ??????????綠色(Painting)：重繪
? ??????????灰色(other)：其它事件花費(fèi)的時(shí)間
? ??????????白色(Idle)：空閑時(shí)間
? ? ? ? e、結(jié)合Main中的詳細(xì)事件統(tǒng)計(jì)，如果有出現(xiàn)紅色三角區(qū)域，說(shuō)明這個(gè)事件存在問(wèn)題，需要特別注意。可以通過(guò)統(tǒng)計(jì)報(bào)表中的Call tree找到對(duì)于的文件鏈接，點(diǎn)進(jìn)去排查代碼。
（3）移動(dòng)設(shè)備方面的拓展
如果想分析移動(dòng)設(shè)備 的頁(yè)面性能，可用CPU控制器來(lái)模擬移動(dòng)端CPU。
1、點(diǎn)擊performance
2、點(diǎn)擊最右側(cè)設(shè)置按鈕（?），工具欄會(huì)展開(kāi)更多模式，如下圖選中CPU 4* slowdown，就能模擬4倍低速CPU
3、其他分析操作同上（1）操作過(guò)程
