使用element-ui的el-tabs組件導致瀏覽器崩潰卡死

問題

vue2項目使用el-tabs組件時，瀏覽器會白屏卡死。

原因

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

搜索相關(guān)資料發(fā)現(xiàn)是因為vue版本過低  element-ui過高導致。

解決：更新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導致頁面卡死

問題描述

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

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

caution:request is not finished yet

問題分析

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

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

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

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

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

注意

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

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

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

最新評論