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

問(wèn)題

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版本過(guò)低  element-ui過(guò)高導(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)致頁(yè)面卡死

問(wèn)題描述

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

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

caution:request is not finished yet

問(wèn)題分析

（1）通過(guò)Postman模擬請(qǐng)求接口，接口正常。

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

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

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

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

注意

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

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

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

最新評(píng)論