前端性能分析的方法有哪些？可以使用哪些工具進(jìn)行前端性能分析？

前端性能分析簡(jiǎn)單點(diǎn)的說(shuō)的話，就是對(duì)前端的性能進(jìn)行一個(gè)分析，前端性能分析的方法是有不少的，比如說(shuō)代碼覆蓋率 Coverage、CPU和內(nèi)存 Performance monitor、頁(yè)面性能 Performance以及l(fā)ighthouse工具分析。既然我們前面已經(jīng)提到了工具分析，那么比較常用的前端性能分析工具有哪些？下面我們就來(lái)了解一下前端性能分析的方法和一些工具。

前端性能分析方法有什么？

1. 代碼覆蓋率 Coverage

打開(kāi)chrome DevTools，ctrl + shift + p，輸入coverage命令，回車(chē)，調(diào)出coverage面板

進(jìn)行錄制，即可分析，加載或執(zhí)行期間的，js被執(zhí)行到情況，未被執(zhí)行的js，就是可以優(yōu)化的點(diǎn)，可以移除死代碼，或懶加載非必要代碼

2. CPU和內(nèi)存 Performance monitor

同樣命令調(diào)出Performance monitor面板，實(shí)時(shí)的查看，當(dāng)前頁(yè)面的CUP，js內(nèi)存，DOM nodes數(shù)量等指標(biāo)

3. 頁(yè)面性能 Performance

使用Performance面板，直接錄制執(zhí)行性能，分析相關(guān)數(shù)據(jù)

4. lighthouse工具分析

lighthouse會(huì)將基于performance的分析，整合出一個(gè)報(bào)告，以具體的性能指標(biāo)給出，提升性能的建議。

什么工具可以進(jìn)行前端性能分析？

1.Timeline概覽

timeline是google的chrome瀏覽器中的一個(gè)開(kāi)發(fā)者工具，它有助于前端開(kāi)發(fā)者來(lái)分析頁(yè)面的解析、腳本運(yùn)行以及渲染、布局的情況，從而幫助開(kāi)發(fā)者去優(yōu)化頁(yè)面的性能。

timeline有三個(gè)主要的模塊：頂部的概況視圖部分，記錄視圖部分和工具欄。除了這些外有三個(gè)模式的錄制：Event模式通過(guò)事件分類(lèi)展現(xiàn)所有錄制的事件；Frames模式展現(xiàn)頁(yè)面渲染的性能；Memory模式展現(xiàn)頁(yè)面內(nèi)存使用情況

2、LightHouse

LightHouse:是谷歌瀏覽器自帶性能分析工具，最強(qiáng)大。維度全，自定義網(wǎng)速而且性能指標(biāo)兼容最新H5API有更為詳細(xì)的優(yōu)化說(shuō)明。

3、PerformanceRunner

PerformanceRunner通過(guò)模擬海量用戶并發(fā)測(cè)試整個(gè)系統(tǒng)的承受能力，PR支持自動(dòng)生成性能分析報(bào)告，報(bào)告以圖表和表格數(shù)據(jù)兩種形式提供，圖表包括了性能曲線、柱狀圖等，清晰直觀，幫助快速了解測(cè)試結(jié)果，查找性能問(wèn)題。

通過(guò)以上的文章，大家對(duì)于前端性能應(yīng)該有了一定的了解。在工作中，我們比較重視的測(cè)試分析是后端性能，其實(shí)前端的的性能分析也是很重要的，是不可忽略的。如果大家想要更多的了解這方面的知識(shí)的話，就可以跟著小編一起來(lái)了解一下。

推薦閱讀：

什么是負(fù)載壓力測(cè)試？負(fù)載壓力測(cè)試的類(lèi)型有哪些？

要怎么選擇性能測(cè)試工具？常用的工具有什么？

web性能測(cè)試用例設(shè)計(jì)策略及方法

Web性能測(cè)試中，B/S與C/S架構(gòu)的性能指標(biāo)一般需要哪些內(nèi)容？

進(jìn)行web負(fù)載測(cè)試的幾個(gè)主要步驟

高并發(fā)系統(tǒng)性能測(cè)試之性能調(diào)優(yōu)和優(yōu)化策略

帶您理解解負(fù)載測(cè)試怎么做及負(fù)載測(cè)試工具