碰到這樣的一個(gè)問題，用戶反饋頁面的圖表一直加載不出來，頁面還卡死
打開鏈接頁面，打開控制臺(tái) Network
看到有個(gè)請求一直pending，結(jié)合用戶描述，頁面一直loading,似乎驗(yàn)證了我的懷疑：后端遲遲沒有相應(yīng)。
但是，還有個(gè)現(xiàn)象，頁面卡死了，后端沒響應(yīng)怎么能導(dǎo)致頁面卡死呢？
既然是頁面卡死，那無非是CPU滿了，或者內(nèi)存滿了
打開瀏覽器性能監(jiān)控面板看看
可以看到內(nèi)存沒有問題，但是CPU使用率一直100%，還有DOM節(jié)點(diǎn)2萬多，顯然，異常出在了這兩個(gè)地方，但是有沒有什么關(guān)聯(lián)呢？
首先思考，什么會(huì)導(dǎo)致CPU使用率長期100%呢？
?1. js代碼一直在運(yùn)行??2. 頁面節(jié)點(diǎn)太多，渲染卡住? 3.兩者皆有
這個(gè)時(shí)候我們就需要使用 Perfomance 分析了
我們發(fā)現(xiàn)，主要運(yùn)行時(shí)間都是js運(yùn)行，有一個(gè)長任務(wù)一直沒有釋放，接下來我們可以通過下鉆上圖標(biāo)紅的Long Task就可以定位出問題的代碼了。
?
回到最開始的Network，也不難發(fā)現(xiàn)，是在處理這個(gè)pending中的請求的結(jié)果時(shí)，js一直在運(yùn)行,我們也可以通過找出本次調(diào)用來排查相關(guān)代碼
文章來源：http://www.zghlxwxcb.cn/news/detail-694437.html
不過這一塊是比較讓人疑惑的，控制臺(tái)不應(yīng)該運(yùn)行在獨(dú)立的進(jìn)程嗎，為什么會(huì)受js運(yùn)行影響？這個(gè)是我們討論的話題外了。
?文章來源地址http://www.zghlxwxcb.cn/news/detail-694437.html
到了這里，關(guān)于記1次前端性能優(yōu)化之CPU使用率的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
