1讼积、performance頁面性能分析
本文將介紹如何使用chrome devTool的performance來對(duì)頁面進(jìn)行性能分析
（1）操作過程
1勤众、進(jìn)入匿名模式保證分析結(jié)果少收到其他插件的干擾（windows可使用快捷點(diǎn) ctrl + shift + N）
2们颜、確保screenshots checkbox是選中的边锁，然后點(diǎn)擊controls茅坛，開始記錄（windows快捷鍵 shift + E）贡蓖，這時(shí)候Devtools就開始錄制各種性能指標(biāo)斥铺，你可以點(diǎn)擊頁面等進(jìn)行各種操作晾蜘，所有的操作都會(huì)被瀏覽器錄制下來剔交。錄制期間，?可以點(diǎn)擊stop進(jìn)行快速操作結(jié)束錄制竭鞍，然后等待顯示性能報(bào)告偎快，stop按鈕位置如下圖：
（2）分析報(bào)告說明
先放上測(cè)試?yán)龍D：
1妖异、首先我們將上面的示例圖進(jìn)行拆分成三部分他膳，1、上面部分是動(dòng)畫記錄條蟀俊，2肢预、統(tǒng)計(jì)細(xì)節(jié)展開區(qū)域烫映，3抽兆、統(tǒng)計(jì)結(jié)果匯總區(qū)域
2辫红、細(xì)節(jié)說明
? ? ? a、FPS(幀率)在最上方動(dòng)畫記錄區(qū)域可以看到完整的圖揍瑟。綠色豎線越高，F(xiàn)PS越高底循，紅色的話表示長(zhǎng)時(shí)間幀，很可能會(huì)出現(xiàn)卡頓祠挫，所在測(cè)試的時(shí)候要特別注意紅色部分
? ? ? b、CPU,在動(dòng)畫記錄區(qū)域可以看到完整的圖慌植。
? ? ? c丈钙、NET(網(wǎng)絡(luò)請(qǐng)求)，在動(dòng)畫記錄區(qū)域可以看到完整的圖，每條色彩橫線表示一種資源伍茄，越長(zhǎng)表示檢索資源所需的時(shí)間越長(zhǎng)。每條橫線淺色的地方表示等待的時(shí)間
? ? ? d、統(tǒng)計(jì)報(bào)表說明：
? ??????????藍(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ū)域斧散，說明這個(gè)事件存在問題话侧，需要特別注意〗挪荩可以通過統(tǒng)計(jì)報(bào)表中的Call tree找到對(duì)于的文件鏈接埂淮，點(diǎn)進(jìn)去排查代碼。
（3）移動(dòng)設(shè)備方面的拓展
如果想分析移動(dòng)設(shè)備 的頁面性能写隶，可用CPU控制器來模擬移動(dòng)端CPU倔撞。
1、點(diǎn)擊performance
2慕趴、點(diǎn)擊最右側(cè)設(shè)置按鈕（?）痪蝇，工具欄會(huì)展開更多模式，如下圖選中CPU 4* slowdown冕房，就能模擬4倍低速CPU
3躏啰、其他分析操作同上（1）操作過程
