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

后续有解决办法再补充