頁面加載速度慢，到底是多少秒，瓶頸在哪里？

前端性能工具Chrome performance 結合F12，基本可以搞定。

一、Chrome performance

1、shift+ctrl+N進入谷歌的私密瀏覽模式；

2、F12調出DevTools；

3、點擊Tab “Performance”；

4、點擊灰色圓點，已開始界面錄制；

5、操作測試界面；

6、操作完成后點擊stop按鈕，開始生成測試報告；

7、分析報告

藍色(Loading)：網絡通信和HTML解析時間

黃色(Scripting)：JavaScript執行時間

紫色(Rendering)：渲染時間

綠色(Painting)：重繪

灰色(system)：系統花費的時間

白色(Idle)：空閑時間

總時間-空閑時間，就是此界面顯示需要的時間。

二、F12

如果不需要分析界面的瓶頸，也可以直接使用Tab “network” ，刷新要測試的界面，會顯示下圖時間：（但不會有詳細的瓶頸數據）

DOMContentLoaded：DOM樹構建完成。即HTML頁面由上向下解析HTML結構到末尾封閉標簽</html>。

Load：頁面加載完畢。DOM樹構建完成后，繼續加載html/css中的圖片資源等外部資源，加載完成后視為頁面加載完畢。

Finish：時間是頁面上所有http請求發送到響應完成的時間，HTTP1.0/1.1協議限定，單個域名的請求并發量是6個，即Finish是所有請求（不只是XHR請求，還包括DOC，img，js，css等資源的請求）在并發量為6的限制下完成的時間。

其實 Chrome performance 比這強大的多，有待大家自己去挖掘。

總結

以上是生活随笔為你收集整理的前端性能测试工具Chrome performance的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。