关于IE的内存回收机制 和 vue在ie上tab页关闭内存不释放问题的尝试与思考

最近接手一个有后端搭建的前端项目,去收拾烂摊子。让我来优化该页面在ie上的白屏问题

首先我看代码  代码结构是keepalive + element的tab插件 + menu插件 做的一个菜单点击,tab标签弹出展示项目。

首先进来将element等一些组件改成按需引入  一些iframe在离开页面时需关闭。 一些v-if等的处理

后面想去解决白屏时发现  这后端keepalive的include属性做的是个假的,也就是这个后端写了个假的动态缓存组件,没有半点用(真不知道这玩意是怎么上线的)、没办法,一顿改改改。搞完发现 谷歌上没毛病了 内存什么的降了一半 运行时是到300M左右

后面有人反馈白屏问题还存在  我才真正去看了ie回收机制

由于ie回收机制的不同 在打开页面时基本可以用下面这张图来看

 打开一个标签,建立一个对象 里面有渲染的html  但是在关闭tab标签时 ie (我是IE11版本)并不像谷歌或者其他浏览器那样会将他回收掉。甚至于 如果你没对你项目中的变量 接口数据等做处理的话 关闭tab时数据都不会给你回收的。

这就导致 你一旦频繁打开一个页面 它相当于不停的创建一个新的对象,你多点几下 一旦ie运行内存到达1400M左右 就会发生白屏卡死情况。

尝试解决办法:

1.keepalive方向,动态缓存方面

我尝试寻找为什么没出现重复打开tab页内存上升情况,发现当时用的是全部缓存而不是动态缓存。一个keepalive缓存的组件关闭只是假关闭,实际上在内存上并没有关闭改对象。详细你可以用插件 vue devtools来看组件存在情况

这样的话 只有第一次打开的时候ie内存会涨  重复打开同一个tab页 内存就不会再增加了,但是这只适用于小项目,我接手的是一个大项目 而且不停的有另外的模块 或大或小要接入这个项目中。这样是肯定不行的  到后面会卡死的。

2.关闭动作方向

我尝试在关闭时 手动去删除该页面对象

使用  this.$destroy('组件名字'),在关闭时强制删除改组件。

发现这样的话,keepalive在再次打开这个页面时 不会再缓存它的信息

这可能和keepalive的机制有关

3.在关闭时清楚数据

在测试种种后我被折磨的很难受了,后面想着优化关闭时的数据回收,差不多就是

页面中有这类写法的

var a = {};
document.getElementById('id').diyProp = a;

离开在生命周期里写成

document.getElementById('id').diyProp = null;

还有

var a = document.getElementById('id');

这类的

离开在生命周期里写成

a = null;

还有console里面打印了大量数据的

要注释掉  它实际上也占了内存

尤其是接口调用时 将大量接口数据赋予变量了的

当代码里面有a = new Array();

这样的代码

还是套用在for循环里面的

结束时要设置为a = null

这样设置完,差不多关闭一个页面能回收个20几M,杯水车薪。

后续有解决办法再补充

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue中,当在新的标签中点击关闭旧的标签时,可以通过监听`beforeunload`事件来实现相应的操作。在`created`生命周期钩子函数中添加以下代码: ```javascript created() { window.addEventListener('beforeunload', () => { // 执行关闭旧标签的操作 // ... }); } ``` 在这个事件监听函数中,你可以执行一些关闭旧标签的操作,比如保存数据、清理资源等。请根据你的具体需求来实现相应的逻辑。 #### 引用[.reference_title] - *1* [vue js监听浏览器tab切换](https://blog.csdn.net/weixin_42439024/article/details/124584223)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue监听浏览器tab切换](https://blog.csdn.net/qq_30351747/article/details/129379289)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue-两个浏览器tab通信的思路](https://blog.csdn.net/weixin_52073113/article/details/121654267)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值