JavaScript之详述闭包导致的内存泄露
一、内存泄露
1. 定义：一块被分配的内存既不能使用，也不能回收。从而影响性能，甚至导致程序崩溃。
2. 起因：JavaScript的垃圾自动回收机制会按一定的策略找出那些不再继续使用的变量，释放其占有的内存。然而由于一些原因导致在这种机制下内存管理器不能正确解读JavaScript变量的生命周期，从而没有释放其内存，而也没有再被使用。
循环引用是导致以上情况的主要原因之一。
二、循环引用
1. 定义：两个对象的互相引用。
IE和Mozilla Firefox均使用引用计数的策略对变量和内存进行管理，当出现循环引用时，各对象的引用数至少为1，在不进行手动设置的情况下，将无法被释放。
闭包实际上非常容易造成JavaScript对象和DOM对象的隐蔽循环引用。来看看下面的例子：
function example(){
var element =document.getElementByID("div1"); //①
element.onclick = function() {
alert("This is a leak!"); //②
}
}
以上函数example() 中用匿名函数创建了一个闭包。
第①句：JavaScript对象element引用了一个DOM对象（其id为“div1”）； JS(element) ----> DOM(div1)
第②句：该DOM对象的onclick属性引用了匿名函数闭包，而闭包可以引用外部函数example() 的整个活动对象，包括elemnt ； DOM(div1.onclick) ---->JS(element)
由此形成了JavaScript对象和DOM对象的隐蔽循环引用。
2.解决方法：
常用的解决方法就是在JavaScript代码段运行完之时将形成循环引用的JavaScript对象手动设置为空，切断引用。
修改的例子如下：
function example(){
var element =document.getElementByID("div1"); //①
element.onclick = function() {
alert("This is a leak!"); //②
}
element = null; //添加的语句
}
一、内存泄露
1. 定义：一块被分配的内存既不能使用，也不能回收。从而影响性能，甚至导致程序崩溃。
2. 起因：JavaScript的垃圾自动回收机制会按一定的策略找出那些不再继续使用的变量，释放其占有的内存。然而由于一些原因导致在这种机制下内存管理器不能正确解读JavaScript变量的生命周期，从而没有释放其内存，而也没有再被使用。
循环引用是导致以上情况的主要原因之一。
二、循环引用
1. 定义：两个对象的互相引用。
IE和Mozilla Firefox均使用引用计数的策略对变量和内存进行管理，当出现循环引用时，各对象的引用数至少为1，在不进行手动设置的情况下，将无法被释放。
闭包实际上非常容易造成JavaScript对象和DOM对象的隐蔽循环引用。来看看下面的例子：
function example(){
var element =document.getElementByID("div1"); //①
element.onclick = function() {
alert("This is a leak!"); //②
}
}
以上函数example() 中用匿名函数创建了一个闭包。
第①句：JavaScript对象element引用了一个DOM对象（其id为“div1”）； JS(element) ----> DOM(div1)
第②句：该DOM对象的onclick属性引用了匿名函数闭包，而闭包可以引用外部函数example() 的整个活动对象，包括elemnt ； DOM(div1.onclick) ---->JS(element)
由此形成了JavaScript对象和DOM对象的隐蔽循环引用。
2.解决方法：
常用的解决方法就是在JavaScript代码段运行完之时将形成循环引用的JavaScript对象手动设置为空，切断引用。
修改的例子如下：
function example(){
var element =document.getElementByID("div1"); //①
element.onclick = function() {
alert("This is a leak!"); //②
}
element = null; //添加的语句
}
如果您知道内存泄漏的起因，那么在 JavaScript 中进行相应的防范就应该相当容易。在这篇文章中，作者 Kiran Sundar 和 Abhijeet Bhattacharya 将带您亲历 JavaScript 中的循环引用的全部基本知识，向您介绍为何它们会在某些浏览器中产生问题，尤其是在结合了闭包的情况下。在了解了您应该引起注意的常见内存泄漏模式之后，您还将学到应对这些泄漏的诸多方法。
JavaScript 是用来向 Web 页面添加动态内容的一种功能强大的脚本语言。它尤其特别有助于一些日常任务，比如验证密码和创建动态菜单组件。JavaScript 易学易用，但却很容易在某些浏览器中引起内存的泄漏。在这个介绍性的文章中，我们解释了 JavaScript 中的泄漏由何引起，展示了常见的内存泄漏模式，并介绍了如何应对它们。
注意本文假设您已经非常熟悉使用 JavaScript 和 DOM 元素来开发 Web 应用程序。本文尤其适合使用 JavaScript 进行 Web 应用程序开发的开发人员，也可供有兴趣创建 Web 应用程序的客户提供浏览器支持以及负责浏览器故障排除的人员参考。
JavaScript 中的内存泄漏
JavaScript 是一种垃圾收集式语言，这就是说，内存是根据对象的创建分配给该对象的，并会在没有对该对象的引用时由浏览器收回。JavaScript 的垃圾收集机制本身并没有问题，但浏览器在为 DOM 对象分配和恢复内存的方式上却有些出入。
Internet Explorer 和 Mozilla Firefox 均使用引用计数来为 DOM 对象处理内存。在引用计数系统，每个所引用的对象都会保留一个计数，以获悉有多少对象正在引用它。如果计数为零，该对象就会被销毁，其占用的内存也会返回给堆。虽然这种解决方案总的来说还算有效，但在循环引用方面却存在一些盲点。
循环引用的问题何在？
当两个对象互相引用时，就构成了循环引用，其中每个对象的引用计数值都被赋 1。在纯垃圾收集系统中，循环引用问题不大：若涉及到的两个对象中的一个对象被任何其他对象引用，那么这两个对象都将被垃圾收集。而在引用计数系统，这两个对象都不能被销毁，原因是引用计数永远不能为零。在同时使用了垃圾收集和引用计数的混合系统中，将会发生泄漏，因为系统不能正确识别循环引用。在这种情况下，DOM 对象和 JavaScript 对象均不能被销毁。清单 1 显示了在 JavaScript 对象和 DOM 对象间存在的一个循环引用。
清单 1. 循环引用导致了内存泄漏
<html>
<body>
Div Element
</body>
</html>
如上述清单中所示，JavaScript 对象 obj 拥有到 DOM 对象的引用，表示为 DivElement。而 DOM 对象则有到此 JavaScript 对象的引用，由 expandoProperty 表示。可见，JavaScript 对象和 DOM 对象间就产生了一个循环引用。由于 DOM 对象是通过引用计数管理的，所以两个对象将都不能销毁。
另一种内存泄漏模式
在清单 2 中，通过调用外部函数 myFunction 创建循环引用。同样，JavaScript 对象和 DOM 对象间的循环引用也会导致内存泄漏。
清单 2. 由外部函数调用引起的内存泄漏
<html>
<head>
</head>
<body onload="Leak()">
</body>
</html>
正如这两个代码示例所示，循环引用很容易创建。在 JavaScript 最为方便的编程结构之一：闭包中，循环引用尤其突出。
JavaScript 中的闭包
JavaScript 的过人之处在于它允许函数嵌套。一个嵌套的内部函数可以继承外部函数的参数和变量，并由该外部函数私有。清单 3 显示了内部函数的一个示例。
清单 3. 一个内部函数
function parentFunction(paramA)
{
var a = paramA;
function childFunction()
{
return a + 2;
}
return childFunction();
}
JavaScript 开发人员使用内部函数来在其他函数中集成小型的实用函数。如清单 3 所示，此内部函数 childFunction 可以访问外部函数 parentFunction 的变量。当内部函数获得和使用其外部函数的变量时，就称其为一个闭包。
了解闭包
考虑如清单 4 所示的代码片段。
清单 4. 一个简单的闭包
<html>
<body>
</body>
</html>
在上述清单中，closureDemoInnerFunction 是在父函数 closureDemoParentFunction 中定义的内部函数。当用外部的 x 对 closureDemoParentFunction 进行调用时，外部函数变量 a 就会被赋值为外部的 x。函数会返回指向内部函数 closureDemoInnerFunction 的指针，该指针包括在变量 x 内。
外部函数 closureDemoParentFunction 的本地变量 a 即使在外部函数返回时仍会存在。这一点不同于 C/C++ 这样的编程语言，在 C/C++ 中，一旦函数返回，本地变量也将不复存在。在 JavaScript 中，在调用 closureDemoParentFunction 的时候，带有属性 a 的范围对象将会被创建。该属性包括值 paramA，又称为“外部 x”。同样地，当 closureDemoParentFunction 返回时，它将会返回内部函数 closureDemoInnerFunction，该函数包括在变量 x 中。
由于内部函数持有到外部函数的变量的引用，所以这个带属性 a 的范围对象将不会被垃圾收集。当对具有参数值 inner x 的 x 进行调用时，即 x("inner x")，将会弹出警告消息，表明 “outer x innerx”。
清单 4 简要解释了 JavaScript 闭包。闭包功能非常强大，原因是它们使内部函数在外部函数返回时也仍然可以保留对此外部函数的变量的访问。不幸的是，闭包非常易于隐藏 JavaScript 对象 和 DOM 对象间的循环引用。
闭包和循环引用
在清单 5 中，可以看到一个闭包，在此闭包内，JavaScript 对象（obj）包含到 DOM 对象的引用（通过 id "element" 被引用）。而 DOM 元素则拥有到 JavaScript obj 的引用。这样建立起来的 JavaScript 对象和 DOM 对象间的循环引用将会导致内存泄漏。
清单 5. 由事件处理引起的内存泄漏模式
<html>
<body>
<button id="element">Click Me</button>
</body>
</html>
避免内存泄漏
幸好，JavaScript 中的内存泄漏是可以避免的。当确定了可导致循环引用的模式之后，正如我们在上述章节中所做的那样，您就可以开始着手应对这些模式了。这里，我们将以上述的 由事件处理引起的内存泄漏模式 为例来展示三种应对已知内存泄漏的方式。
一种应对 清单 5 中的内存泄漏的解决方案是让此 JavaScript 对象 obj 为空，这会显式地打破此循环引用，如清单 6 所示。
清单 6. 打破循环引用
<html>
<body>
<button id="element">"Click Here"</button>
</body>
</html>
清单 7 是通过添加另一个闭包来避免 JavaScript 对象和 DOM 对象间的循环引用。
清单 7. 添加另一个闭包
<html>
<body>
<button id="element">"Click Here"</button>
</body>
</html>
清单 8 则通过添加另一个函数来避免闭包本身，进而阻止了泄漏。
清单 8. 避免闭包自身
<html>
<head>
</head>
<body>
<button id="element">"Click Here"</button>
</body>
</html>
结束语
本文解释了循环引用是如何导致 JavaScript 中的内存泄漏的 —— 尤其是在结合了闭包的情况下。您还了解了涉及到循环引用的一些常见内存泄漏模式以及应对这些泄漏模式的几种简单方式。
闭包的情况下。您还了解了涉及到循环引用的一些常见内存泄漏模式以及应对这些泄漏模式的几种简
一、内存泄露
1. 定义：一块被分配的内存既不能使用，也不能回收。从而影响性能，甚至导致程序崩溃。
2. 起因：JavaScript的垃圾自动回收机制会按一定的策略找出那些不再继续使用的变量，释放其占有的内存。然而由于一些原因导致在这种机制下内存管理器不能正确解读JavaScript变量的生命周期，从而没有释放其内存，而也没有再被使用。
循环引用是导致以上情况的主要原因之一。
二、循环引用
1. 定义：两个对象的互相引用。
IE和Mozilla Firefox均使用引用计数的策略对变量和内存进行管理，当出现循环引用时，各对象的引用数至少为1，在不进行手动设置的情况下，将无法被释放。
闭包实际上非常容易造成JavaScript对象和DOM对象的隐蔽循环引用。来看看下面的例子：
function example(){ var element =document.getElementByID("div1"); //① element.onclick = function() { alert("This is a leak!"); //② }}以上函数example() 中用匿名函数创建了一个闭包。第①句：JavaScript对象element引用了一个DOM对象（其id为“div1”）； JS(element) ----> DOM(div1)
第②句：该DOM对象的onclick属性引用了匿名函数闭包，而闭包可以引用外部函数example() 的整个活动对象，包括elemnt ； DOM(div1.onclick) ---->JS(element)由此形成了JavaScript对象和DOM对象的隐蔽循环引用。
2.解决方法：
常用的解决方法就是在JavaScript代码段运行完之时将形成循环引用的JavaScript对象手动设置为空，切断引用。
修改的例子如下：
function example(){ var element =document.getElementByID("div1"); //① element.onclick = function() { alert("This is a leak!"); //② } element = null; //添加的语句}
JavaScript之详述闭包导致的内存泄露的更多相关文章
- 找出并解决 JavaScript 和 Dojo 引起的浏览器内存泄露问题
简介: 如果大量使用 JavaScript 和 Ajax 技术开发 Web 2.0 应用程序,您很有可能会遇到浏览器的内存泄漏问题.如果您有一个单页应用程序或者一个页面要处理很多 UI 操作,问题可能 ...
- js闭包和ie内存泄露原理
也议 js闭包和ie内存泄露原理 可以, 但小心使用. 闭包也许是 JS 中最有用的特性了. 有一份比较好的介绍闭包原理的文档. 有一点需要牢记, 闭包保留了一个指向它封闭作用域的指针, 所以, 在给 ...
- dotnet 6 在 Win7 系统证书链错误导致 HttpWebRequest 内存泄露
本文记录我将应用迁移到 dotnet 6 之后,在 Win7 系统上,因为使用 HttpWebRequest 访问一个本地服务,此本地服务开启 https 且证书链在此 Win7 系统上错误,导致应用 ...
- JavaScript 中 4 种常见的内存泄露陷阱
了解 JavaScript 的内存泄露和解决方式! 在这篇文章中我们将要探索客户端 JavaScript 代码中常见的一些内存泄漏的情况,并且学习如何使用 Chrome 的开发工具来发现他们.读一读吧 ...
- JavaScript垃圾回收（三）——内存泄露
一.JavaScript内存监测工具 在讨论内存泄露之前,先介绍几款JavaScript内存监测工具. IE的sIEve与JSLeaksDetector(这两个可以在下面的附件中下载),firefox ...
- 也议 js闭包和ie内存泄露原理
可以, 但小心使用. 闭包也许是 JS 中最有用的特性了. 有一份比较好的介绍闭包原理的文档. 有一点需要牢记, 闭包保留了一个指向它封闭作用域的指针, 所以, 在给 DOM 元素附加闭包时, 很可能 ...
- JavaScript：4个常见的内存泄露
什么是内存泄漏 内存泄漏基本上就是不再被应用需要的内存,由于某种原因,没有被归还给操作系统或者进入可用内存池. 编程语言喜欢不同的管理内存方式.然而,一段确定的内存是否被使用是一个不可判断的问题.换句 ...
- logging 模块误用导致的内存泄露
首先介绍下怎么发现的吧, 线上的项目日志是通过 logging 模块打到 syslog 里, 跑了一段时间后发现 syslog 的 UDP 连接超过了 8W, 没错是 8 W. 主要是 logging ...
- 深度：ARC会导致的内存泄露
iOS提供了ARC功能,很大程度上简化了内存管理的代码. 但使用ARC并不代表了不会发生内存泄露,使用不当照样会发生内存泄露. 下面列举两种内存泄露的情况. 1,循环参照 A有个属性参照B,B有个属性 ...
随机推荐
- windows10下vscode+cmake编译Qt5代码
概述 本文演示环境: windows10 cmake version:3.18 qt version: 5.14 vscode version: 1.54.1 本文演示环境基于在线模式, 离线使用VS ...
- 【LeetCode】339. Nested List Weight Sum 解题报告(C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 dfs 日期 题目地址:https://leetcod ...
- 【LeetCode】705. Design HashSet 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 位图法 数组法 日期 题目地址:https://le ...
- 【LeetCode】90. Subsets II 解题报告（Python & C++）
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 回溯法 日期 题目地址:https://leet ...
- 15 - Vue3 UI Framework - 完工部署
项目官网也基本完成了,接下来我们再讲一下如何将项目官网部署到 GitHub Pages 上 返回阅读列表点击 这里 项目配置 常见的模式有三种,即 History 模式 Hash 模式 Memory ...
- ZOJ 3785：What day is that day?（数论）
What day is that day? Time Limit: 2 Seconds Memory Limit: 65536 KB It's Saturday today, what day is ...
- 如何在 Go 中将 []byte 转换为 io.Reader？
原文链接: 如何在 Go 中将 []byte 转换为 io.Reader? 在 stackoverflow 上看到一个问题,题主进行了一个网络请求,接口返回的是 []byte.如果想要将其转换成 io ...
- css--深入理解z-index引发的层叠上下文、层叠等级和层叠顺序
前言 在编写css样式代码的时候,我们经常会遇到z-index属性的使用,我们可能只了解z-index能够提高元素的层级,并不知道具体是怎么实现的.本文就来总结一个由z-index 引发的层叠上下文和 ...
- 如何优雅地读写HttpServletRequest和HttpServletResponse的请求体
最近很多交互要同原生的HttpServletRequest和HttpServletResponse打交道.从HttpServletRequest中读取body数据封装成某种数据结构:向HttpServ ...
- 物联网大赛 - Android学习笔记（一） Android概念
一.Android 概念 Android是开放式的手机和电脑操作系统,是基于Linux系统做的上层开发. android可以做些什么? Android可以开发各种手机应用APP,也可以开发车载系统等, ...