發(fā)布時(shí)間:2020-07-29
前端性能分析簡單點(diǎn)的說的話,就是對(duì)前端的性能進(jìn)行一個(gè)分析,前端性能分析的方法是有不少的,比如說代碼覆蓋率 Coverage、CPU和內(nèi)存 Performance monitor、頁面性能 Performance以及l(fā)ighthouse工具分析。既然我們前面已經(jīng)提到了工具分析,那么比較常用的前端性能分析工具有哪些?下面我們就來了解一下前端性能分析的方法和一些工具。
前端性能分析方法有什么?
1. 代碼覆蓋率 Coverage
打開chrome DevTools,ctrl + shift + p,輸入coverage命令,回車,調(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)前頁面的CUP,js內(nèi)存,DOM nodes數(shù)量等指標(biāo)
3. 頁面性能 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è)開發(fā)者工具,它有助于前端開發(fā)者來分析頁面的解析、腳本運(yùn)行以及渲染、布局的情況,從而幫助開發(fā)者去優(yōu)化頁面的性能。
timeline有三個(gè)主要的模塊:頂部的概況視圖部分,記錄視圖部分和工具欄。除了這些外有三個(gè)模式的錄制:Event模式通過事件分類展現(xiàn)所有錄制的事件;Frames模式展現(xiàn)頁面渲染的性能;Memory模式展現(xiàn)頁面內(nèi)存使用情況
2、LightHouse
LightHouse:是谷歌瀏覽器自帶性能分析工具,最強(qiáng)大。維度全,自定義網(wǎng)速而且性能指標(biāo)兼容最新H5API有更為詳細(xì)的優(yōu)化說明。
PerformanceRunner通過模擬海量用戶并發(fā)測試整個(gè)系統(tǒng)的承受能力,PR支持自動(dòng)生成性能分析報(bào)告,報(bào)告以圖表和表格數(shù)據(jù)兩種形式提供,圖表包括了性能曲線、柱狀圖等,清晰直觀,幫助快速了解測試結(jié)果,查找性能問題。
通過以上的文章,大家對(duì)于前端性能應(yīng)該有了一定的了解。在工作中,我們比較重視的測試分析是后端性能,其實(shí)前端的的性能分析也是很重要的,是不可忽略的。如果大家想要更多的了解這方面的知識(shí)的話,就可以跟著小編一起來了解一下。
推薦閱讀:
什么是負(fù)載壓力測試?負(fù)載壓力測試的類型有哪些?
Web性能測試中,B/S與C/S架構(gòu)的性能指標(biāo)一般需要哪些內(nèi)容?
電話咨詢,400-035-7887,安排專業(yè)技術(shù)售前給您解答(產(chǎn)品試用、技術(shù)交流、服務(wù)咨詢和商務(wù)報(bào)價(jià))。
您的信息已成功提交!
我們的客服人員稍后會(huì)與您聯(lián)系