一次内存泄露排查

项目背景

后台在管理界面直接编辑js,然后前端直接运行加载此 js,并且此页面不会刷新(指定的 F5 这种刷新),而且是一直投影在屏幕上的。其中 js 分2部分,一部分是相对固定。一部分是动态的。前端通用不停的获取后台的 js 然后在实例化 js 来动态更新界面数据。

方案

直接使用 new Function 来动态解析后台填写的 js 脚本。demo 如下

<html>
    <head>
        <h1></h1>

    </head>
    <script>
        //转换函数
        var convertToFn = function (fun) {
            return (new Function("return " + fun))();
        }
        var i = 0;
        setInterval(function(){
            var fn = convertToFn("{\
                            thisMap : {\
                                thisFn : function(){\
                                    return 'aaa'\
                                }\
                            }\
                        }");
            fn.thisMap.thisFn();
            i++;
            document.getElementsByTagName("h1")[0].innerHTML = i;
//            console.log(fn.thisMap.thisFn())
        }, 10);
    </script>
</html>

项目上线后发现此方法非常损耗内存。上面的函数循环大约20000次之后占用内存 11MB 左右。并且一直不会释放。从而导致浏览器内存耗尽奔溃。下图有快照。

20000次很快就花完的了,而且设置的是4秒一次。又不止一个图形在刷,有20+个。

曲线救国

不在支持动态刷新固定的部分的 js,只做值的动态更新。进一步验证之后,此方式是可以有效控制内存不增长。demo 如下

<html>
    <head>
        <h1></h1>
    </head>
    <script>
        //先使用 el 表达式输出到界面(或者使用 document.write 输出,再不济就用上面的 new Function 吧,只输出一次就好 )
        var data = {};

        var fn = function(){
            return {
                thisMap : {
                    thisFn : function(){
                        return 'aaa'
                    },
                    getData : data
                }
            }
        }

        var i = 0;
        setInterval(function(){
            //赋值给此变量,后面调用的时候就可以拿到最新的了
            data = Math.random(1000000)*100;
            i++;
            document.getElementsByTagName("h1")[0].innerHTML = i;
//            console.log(fn().thisMap.getData)
        }, 10);
    </script>
</html>

下图为内存快照,开始有增长,后面基本就没有了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值