注: 轉自 https://www.cnblogs.com/lansan0701/p/11225956.html
另: 參考 https://blog.csdn.net/xiaozr1223/article/details/115478308
頁面加載速度慢，到底是多少秒，瓶頸在哪里？
前端性能工具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 比這強大的多，有待大家自己去挖掘。