使用element-ui的el-tabs組件導(dǎo)致瀏覽器崩潰卡死

問題

vue2項(xiàng)目使用el-tabs組件時(shí)，瀏覽器會(huì)白屏卡死。

原因

查看package.json文件發(fā)現(xiàn)當(dāng)前vue版本為2.5.10，當(dāng)前elementUI版本為2.15.1。

搜索相關(guān)資料發(fā)現(xiàn)是因?yàn)関ue版本過低  element-ui過高導(dǎo)致。

解決：更新vue版本

pakeage.json:

• "element-ui": "2.13.0",
• "vue": "2.6.10",
• "vue-template-compiler": "2.6.10"

vue出現(xiàn)caution:request is not finished yet導(dǎo)致頁面卡死

問題描述

開發(fā)環(huán)境正常運(yùn)行，部署上線后點(diǎn)擊某一按鈕請求接口時(shí)頁面出現(xiàn)卡死。

在Network=>Timing發(fā)現(xiàn)異常提示： 

caution:request is not finished yet

問題分析

（1）通過Postman模擬請求接口，接口正常。

（2）本地部署前端代碼，ip和localhost訪問時(shí)頁面不會(huì)出現(xiàn)卡死問題。此時(shí)我有點(diǎn)懷疑人生，既然都是部署，那就徹底一點(diǎn)，通過內(nèi)網(wǎng)映射的域名訪問前端，終于還原卡死的異常問題。

（3）還原異常問題還是不夠，我需要找到問題所在位置。因?yàn)橹挥悬c(diǎn)擊對應(yīng)的那個(gè)按鈕才會(huì)出現(xiàn)頁面卡死問題。所以將點(diǎn)擊事件逐一排查，排查的方式簡單粗暴，就是排除法，通過注釋一段段代碼調(diào)試。

（4）最后發(fā)現(xiàn)是這串代碼有問題，min>max會(huì)導(dǎo)致死循環(huán)（項(xiàng)目實(shí)際最大最小值會(huì)以參數(shù)控制）

其實(shí)在開發(fā)環(huán)境點(diǎn)擊按鈕時(shí)，Console中Vue已經(jīng)打印警告提示

注意

頁面出現(xiàn)卡死的具體原因各種各樣，但大部分都是由于死循環(huán)導(dǎo)致的，如果你也遇到此類問題，可以通過Console異常提示，還有排除法（通過注釋相關(guān)代碼排除，找到出現(xiàn)問題的位置）解決問題。

根據(jù)自己的代碼有技巧使用排查手段分析問題，畢竟由于死循環(huán)出現(xiàn)卡死問題的場景不一。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論