vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题
作者:T@Nn€
这篇文章主要介绍了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异常提示,还有排除法(通过注释相关代码排除,找到出现问题的位置)解决问题。
根据自己的代码有技巧使用排查手段分析问题,毕竟由于死循环出现卡死问题的场景不一。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。