IE项目使用iframe之后内存持续升高的解决办法

 

问题背景

最近一年多在做的项目是一个大数据的产品平台, 做一些数据类的产品, 主要是做一些客户的分群筛选, 客户画像, 策略配置之类的功能, 项目使用的技术栈是vue, 项目的一些产品页会被公司的几个其他的平台调用. 出现问题的这个页面是一个用户的画像页, 调用方是业务方坐席的使用平台, 一个运行在IE上的项目, 调用的方式是使用iframe将页面嵌入.

 

问题的产生

周一我们收到邮件, 说我们的画像页面在生产上被调用之后,IE的内存会持续升高,每查看一个新客户的信息 内存的增长量在28M左右, 这个问题导致差不多每隔1-2小时, 坐席的IE浏览器就会卡死, 必须重启. 

 

问题的分析

看到问题之后, 我们想到的问题产生原因可能是由于:

一、前端页面存在内存泄漏，项目组后端不熟悉vue的同事会想到是不是vue不兼容ie， 然后还存在内存泄漏的问题。

二、后端排查接口调用内存泄漏的问题.

三、调用iframe 之后, 内存没用释放, 然后坐席由于要查看客户信息, 又会不断调用,所以内存的占用会持续不断地增加.

 

问题的解决

我们从上面想到的三个方面入手, 对问题产生的原因进行了排查.

首先排除vue项目不兼容+前端内存泄漏

对方项目使用的ie版本是ie的edge版本, 而vue是兼容ie9及以上版本的, 之所以不兼容ie8 及以下版本是因为, ie8 不支持ES5的Object.defineProperty()属性, 所以首先就排除了兼容性的问题, 至于内存泄漏的问题, 一般前端的内存泄漏问题大体出现在事件注册上或者一些使用过但未释放的 dom 节点, 我们这个页面就是一个很简单的纯展示性的页面, 除了筛选客户, 然后就没有其他交互功能, 用Profiles面板查看页面的内存之后,发现每次页面打开操作之后的内存占用量最多也就17M, 而且也没有怎么发现内存持续升高的问题.

 

然后,后端查看了页面的接口调用返回情况