前端性能分析簡單點的說的話，就是對前端的性能進行一個分析，前端性能分析的方法是有不少的，比如說代碼覆蓋率 Coverage、CPU和內存 Performance monitor、頁面性能 Performance以及l(fā)ighthouse工具分析。既然我們前面已經(jīng)提到了工具分析，那么比較常用的前端性能分析工具有哪些？下面我們就來了解一下前端性能分析的方法和一些工具。
前端性能分析方法有什么？
1. 代碼覆蓋率 Coverage
打開chrome DevTools，ctrl + shift + p，輸入coverage命令，回車，調出coverage面板
進行錄制，即可分析，加載或執(zhí)行期間的，js被執(zhí)行到情況，未被執(zhí)行的js，就是可以優(yōu)化的點，可以移除死代碼，或懶加載非必要代碼
2. CPU和內存 Performance monitor
同樣命令調出Performance monitor面板，實時的查看，當前頁面的CUP，js內存，DOM nodes數(shù)量等指標
3. 頁面性能 Performance
使用Performance面板，直接錄制執(zhí)行性能，分析相關數(shù)據(jù)
4. lighthouse工具分析
lighthouse會將基于performance的分析，整合出一個報告，以具體的性能指標給出，提升性能的建議。
什么工具可以進行前端性能分析？
1.Timeline概覽
timeline是google的chrome瀏覽器中的一個開發(fā)者工具，它有助于前端開發(fā)者來分析頁面的解析、腳本運行以及渲染、布局的情況，從而幫助開發(fā)者去優(yōu)化頁面的性能。
timeline有三個主要的模塊：頂部的概況視圖部分，記錄視圖部分和工具欄。除了這些外有三個模式的錄制：Event模式通過事件分類展現(xiàn)所有錄制的事件；Frames模式展現(xiàn)頁面渲染的性能；Memory模式展現(xiàn)頁面內存使用情況
2、LightHouse
LightHouse:是谷歌瀏覽器自帶性能分析工具，最強大。維度全，自定義網(wǎng)速而且性能指標兼容最新H5API有更為詳細的優(yōu)化說明。
3、PerformanceRunner
PerformanceRunner通過模擬海量用戶并發(fā)測試整個系統(tǒng)的承受能力，PR支持自動生成性能分析報告，報告以圖表和表格數(shù)據(jù)兩種形式提供，圖表包括了性能曲線、柱狀圖等，清晰直觀，幫助快速了解測試結果，查找性能問題。
通過以上的文章，大家對于前端性能應該有了一定的了解。在工作中，我們比較重視的測試分析是后端性能，其實前端的的性能分析也是很重要的，是不可忽略的。如果大家想要更多的了解這方面的知識的話，就可以跟著小編一起來了解一下。
推薦閱讀：
什么是負載壓力測試？負載壓力測試的類型有哪些？
要怎么選擇性能測試工具？常用的工具有什么？
web性能測試用例設計策略及方法
Web性能測試中，B/S與C/S架構的性能指標一般需要哪些內容？
進行web負載測試的幾個主要步驟
高并發(fā)系統(tǒng)性能測試之性能調優(yōu)和優(yōu)化策略
帶您理解解負載測試怎么做及負載測試工具
sales@spasvo.com
