关于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,杯水车薪。

后续有解决办法再补充