index主页引用10个弹窗组件,10个抽屉组件,多次打开弹窗和抽屉导致内存泄露,最后导致浏览器崩溃

内存泄露问题,请大家给出方向或者方案,帮帮我

index主页引用10个弹窗组件,10个抽屉组件,多次打开弹窗和抽屉导致内存泄露,最后导致浏览器崩溃

主页代码

index主页引用10个弹窗组件,10个抽屉组件,多次打开弹窗和抽屉导致内存泄露,最后导致浏览器崩溃

初始进入 内存121MB
index主页引用10个弹窗组件,10个抽屉组件,多次打开弹窗和抽屉导致内存泄露,最后导致浏览器崩溃

第一打开【弹窗】,选择1条数据回显数据详情 内存150MB

index主页引用10个弹窗组件,10个抽屉组件,多次打开弹窗和抽屉导致内存泄露,最后导致浏览器崩溃

点击【退出详细】按钮, 刷新路由重新进入界面(非F5方式刷新页面)内存200MB 发现内存增长巨大,

以下是自己尝试方法:
1、组件底层修改代码,没有释放内存
2、使用 beforeDestroy 生命周期 卸载组件
3、使用 v-if变成v-show 防止多次打开DOM节点
4、业务代码里没有监听方式
以上方式都是失败的

这个页面工程很大,重构伤不起,
请大家给个方向,我们自己尝试即可,感谢大家提供思路和方案

讨论数量: 5
cnguu

几个方面入手

  1. keep-alive影响
  2. js写法,闭包,全局变量,事件等等
  3. 第三方包影响
  4. 内存快照调试
1年前 评论
tianle_1990 (楼主) 1年前

组件用懒加载估计会好一点 如果组件不需要同时打开可以试试动态组件component :is

1年前 评论
tianle_1990 (楼主) 1年前

最后是怎么解决的呢,我用element-ui测试了下里面只要套表单 就没办法删干净

4个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!