vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题

使用element-ui的el-tabs组件导致浏览器崩溃卡死

问题

vue2项目使用el-tabs组件时，浏览器会白屏卡死。

原因

查看package.json文件发现当前vue版本为2.5.10，当前elementUI版本为2.15.1。

搜索相关资料发现是因为vue版本过低  element-ui过高导致。

解决：更新vue版本

pakeage.json:

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

vue出现caution:request is not finished yet导致页面卡死

问题描述

开发环境正常运行，部署上线后点击某一按钮请求接口时页面出现卡死。

在Network=>Timing发现异常提示： 

caution:request is not finished yet

问题分析

（1）通过Postman模拟请求接口，接口正常。

（2）本地部署前端代码，ip和localhost访问时页面不会出现卡死问题。此时我有点怀疑人生，既然都是部署，那就彻底一点，通过内网映射的域名访问前端，终于还原卡死的异常问题。

（3）还原异常问题还是不够，我需要找到问题所在位置。因为只有点击对应的那个按钮才会出现页面卡死问题。所以将点击事件逐一排查，排查的方式简单粗暴，就是排除法，通过注释一段段代码调试。

（4）最后发现是这串代码有问题，min>max会导致死循环（项目实际最大最小值会以参数控制）

其实在开发环境点击按钮时，Console中Vue已经打印警告提示

注意

页面出现卡死的具体原因各种各样，但大部分都是由于死循环导致的，如果你也遇到此类问题，可以通过Console异常提示，还有排除法（通过注释相关代码排除，找到出现问题的位置）解决问题。

根据自己的代码有技巧使用排查手段分析问题，毕竟由于死循环出现卡死问题的场景不一。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论