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

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

一、Chrome performance

1、shift+ctrl+N進(jìn)入谷歌的私密瀏覽模式；

2、F12調(diào)出DevTools；

3、點(diǎn)擊Tab “Performance”；

4、點(diǎn)擊灰色圓點(diǎn)，已開(kāi)始界面錄制；

5、操作測(cè)試界面；

6、操作完成后點(diǎn)擊stop按鈕，開(kāi)始生成測(cè)試報(bào)告；

7、分析報(bào)告

藍(lán)色(Loading)：網(wǎng)絡(luò)通信和HTML解析時(shí)間

黃色(Scripting)：JavaScript執(zhí)行時(shí)間

紫色(Rendering)：渲染時(shí)間

綠色(Painting)：重繪

灰色(system)：系統(tǒng)花費(fèi)的時(shí)間

白色(Idle)：空閑時(shí)間

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

二、F12

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

DOMContentLoaded：DOM樹(shù)構(gòu)建完成。即HTML頁(yè)面由上向下解析HTML結(jié)構(gòu)到末尾封閉標(biāo)簽</html>。

Load：頁(yè)面加載完畢。DOM樹(shù)構(gòu)建完成后，繼續(xù)加載html/css中的圖片資源等外部資源，加載完成后視為頁(yè)面加載完畢。

Finish：時(shí)間是頁(yè)面上所有http請(qǐng)求發(fā)送到響應(yīng)完成的時(shí)間，HTTP1.0/1.1協(xié)議限定，單個(gè)域名的請(qǐng)求并發(fā)量是6個(gè)，即Finish是所有請(qǐng)求（不只是XHR請(qǐng)求，還包括DOC，img，js，css等資源的請(qǐng)求）在并發(fā)量為6的限制下完成的時(shí)間。

其實(shí) Chrome performance 比這強(qiáng)大的多，有待大家自己去挖掘。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。