前端性能分析簡單點的說的話，就是對前端的性能進行一個分析，前端性能分析的方法是有不少的，比如說代碼覆蓋率 Coverage、CPU和內存 Performance monitor、頁面性能 Performance以及lighthouse工具分析。既然我們前面已經提到了工具分析，那么比較常用的前端性能分析工具有哪些？下面我們就來了解一下前端性能分析的方法和一些工具。

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

1. 代碼覆蓋率 Coverage

打開chrome DevTools，ctrl + shift + p，輸入coverage命令，回車，調出coverage面板

進行錄制，即可分析，加載或執行期間的，js被執行到情況，未被執行的js，就是可以優化的點，可以移除死代碼，或懶加載非必要代碼

2. CPU和內存 Performance monitor

同樣命令調出Performance monitor面板，實時的查看，當前頁面的CUP，js內存，DOM nodes數量等指標

3. 頁面性能 Performance

使用Performance面板，直接錄制執行性能，分析相關數據

4. lighthouse工具分析

lighthouse會將基于performance的分析，整合出一個報告，以具體的性能指標給出，提升性能的建議。

什么工具可以進行前端性能分析？

1.Timeline概覽

timeline是google的chrome瀏覽器中的一個開發者工具，它有助于前端開發者來分析頁面的解析、腳本運行以及渲染、布局的情況，從而幫助開發者去優化頁面的性能。

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

2、LightHouse

LightHouse:是谷歌瀏覽器自帶性能分析工具，最強大。維度全，自定義網速而且性能指標兼容最新H5API有更為詳細的優化說明。

3、PerformanceRunner

PerformanceRunner通過模擬海量用戶并發測試整個系統的承受能力，PR支持自動生成性能分析報告，報告以圖表和表格數據兩種形式提供，圖表包括了性能曲線、柱狀圖等，清晰直觀，幫助快速了解測試結果，查找性能問題。

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

推薦閱讀：

什么是負載壓力測試？負載壓力測試的類型有哪些？

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

web性能測試用例設計策略及方法

Web性能測試中，B/S與C/S架構的性能指標一般需要哪些內容？

進行web負載測試的幾個主要步驟

高并發系統性能測試之性能調優和優化策略

帶您理解解負載測試怎么做及負載測試工具