造成JavaScript内存泄漏的几种原因分析

何为内存泄漏:由于疏忽或错误造成程序未能释放已经不再使用的内存。内存泄漏并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前就失去了对该段内存的控制,从而造成了内存的浪费。

JavaScript造成内存泄漏的几种原因分析:


1、意外的全局变量
js对未声明变量会在全局最高对象上创建它的引用,(是以属性存在的,而不是变量),如果在游览器上就是window对象,如果在node环境下就是global;如果未声明的变量缓存大量的数据,它可能只有在页面被刷新或者被关闭的时候才会释放内存,这样就造成了内存意外泄漏。如下例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script type="text/javascript">
        function testfunc() {
            bfwname = "线上技术学习开发平台"
        }
        testfunc()
        console.log(window)
    </script>
</head>
<body>

</body>
</html>


在控制台可以看到
造成JavaScript内存泄漏的几种原因分析
还有通过this创建意外的全局变量

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script type="text/javascript">
        function testfunc() {
            this.bfwname = "线上技术学习开发平台"
        }
        testfunc()
        console.log(window.bfwname)
    </script>
</head>
<body>

</body>
</html>



造成JavaScript内存泄漏的几种原因分析
针对上面类型的内存泄漏我们在平时一定要声明变量,不要有全局直接引用。(在JavaScript文件中添加 'use strict',开启严格模式,可以有效地避免上述问题。)

2、console.log
作为前端平时使用console.log在控制台打出相对应的信息可以说是非常常见。但如果没有去掉console.log可能会存在内存泄漏。因为在代码运行之后需要在开发工具能查看对象信息,所以传递给console.log的对象是不能被垃圾回收。

3、闭包
首先闭包是一个函数A返回一个内联的函数B,及时A函数执行完函数B也可以访问函数A里面的变量,这就是一个简单的闭包。本质上闭包是将函数内部和外部连接起来的一座桥梁。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script type="text/javascript">
        function Bfw(name) {
            function sendName() {
                console.log(name)
            }
            return sendName
        }
        var test = Bfw("线上技术学习开发平台")
        test() //tokey
    </script>
</head>
<body>

</body>
</html>

点击查看剩余70%

{{collectdata}}

网友评论0