• javascript中导致内存泄漏的行为


    1.全局变量

    全局变量

    2段测试代码

    <script>
            var a = (new Array(1000000).fill("*aaaa1111"));  
    </script>
    
    <script>
        function name() {
            var a = (new Array(1000000).fill("*aaaa1111"));  
        }
    </script>

    上面一段代码是全局变量,下面一段代码是局部变量

     在浏览器自动回收垃圾以后,可以看到第二种写法,会占用比下面更多的内存空间。因为a是全局变量,并没有被释放掉,所以一直留在内存里面。function函数里面的变量在执行完毕以后会释放掉,

    不会留在内存中。可以多加几个变量测试一下。

    <script>
        function name() {
            a = (new Array(1000000).fill("*aaaa1111"));  
        }
        name();
    </script>

    这样写变量也不会被释放,不加申明的变量都是全局变量

     解决办法,用完就释放

     而且我发现,全局变量,手动垃圾回收也是无法被释放的。会一直留在内存里面。

     立即执行函数也可以处理这个全局变量导致内存泄漏的问题。

    2.不要写console.log()

    <script>
        var setDom = document.getElementById('set');
        setDom.addEventListener('click', function(){
            console.log(new Array(100000).fill('aaaa1'));
        });   
    </script>
    
    <script>
        var setDom = document.getElementById('set');
        setDom.addEventListener('click', function(){
           
        });   
    </script>

    2段代码,上面打印值,下面什么都不打印,查看内存的情况,都点击几次div,然后手动垃圾回收,查看结果

    可以看出来,console.log的内存也会存在在内存里面,多次点击,甚至会堆起来,手动释放以后,值也还是比没用console.log的高不少。

     3.setInterVal

     只有interval内的引用被保存在外部,才会造成泄漏,否则,内部的值是会被清除的。但是setInterVal,本身对内存的消耗就不小。

     下面这种情况,页面开的时间长一点,占用内存超过1024mb的时候,页面很快就会崩溃的

     

     4.闭包

    闭包引起的闭包内的变量无法被释放掉。一直被外部变量引用着,外部变量一直在内存里面,1的情况已经说了,全局变量是无法被释放掉的。

    <script>
    function outer() {
         var  a = (new Array(1000000).fill("*aaaa1111")); 
         var  inner = function () {
                console.info(a)
         }
        return inner    // inner 就是一个闭包函数,因为他能够访问到outer函数的作用域
    }
    var c = outer();
    c();
    </script>
    
    <script>
    function outer() {
         var  a = (new Array(1000000).fill("*aaaa1111")); 
         var  inner = function () {
                console.info(a)
         }
        return inner    // inner 就是一个闭包函数,因为他能够访问到outer函数的作用域
    }
    outer();
    </script>

    闭包被保存在了全局变量c上面,值并不会被释放掉,所以闭包里面的值一直被存放在内存里面,无法被释放掉。

     

    a.和c都无法被释放了,所以垃圾回收以后内存存储的值更大了,可以试一试console.log(a),最后值还是5662304左右,说明闭包被引用的值才会被储存起来。不引用的值就不会被保存在内存里面

     上面是对闭包的解决办法,引用的值,置空,置空以后。内存就自动释放这部分变量了。手动垃圾回收以后

    值就会变成1662300,一下就变小了。一个两个对象放在全局其实不会有问题,但是对象的值特别大,且很多,就会页面奔溃了。

      4.对页面的刷新并不能释放泄漏的内存

      可以看到不停的刷新页面,内存在不停的增加,但是垃圾回收以后,内存值变小了。

      嵌套iframe测试

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <iframe id="iframes" src="./1.html"></iframe>
    </body>
    <script>
    
    var iframe = document.getElementById('iframes');
    document.addEventListener('click', function(){
        iframe.src = './1.html?name=222';
        console.log('执行了');
    });
    
    </script>

     

    频繁刷新iframe也能导致占用内存的变大,手动垃圾回收也能减小内存。cpu的占用也会突然变高。但是我觉得这部分变大对性能的影响不是很大,因为很快变量就被释放掉了,垃圾自动回收2-3秒执行一次,如果内存已经被占用很多可能会有崩溃的可能。

  • 相关阅读:
    js-监听网络状态
    call、apply、bind三者比较
    弹框滑动击穿问题
    Vue指令及自定义指令的使用
    vue-cli 运行打开浏览器
    递归判断多维数组中对象是否有值
    sync 修饰符在Vue中如何使用
    自定义组件 v-model 的使用
    Object.keys( )与 for in 区别
    mongodb 安装
  • 原文地址:https://www.cnblogs.com/chenyi4/p/13719245.html
Copyright © 2020-2023  润新知