内存泄漏常见的原因有三种：

1. 闭包

2. 未解除事件绑定

3. 循环引用DOM元素

除此之外，还有一种泄漏原因少有人知，它和innerHTML有关，不过很容易解决。

出现这种内存泄漏需要有三个条件：

　　1. 内存中存在一个未加入DOM树的元素

　　2. 给这个元素设置innerHTML，注意，必须是能创建元素并且绑定了DOM 0级事件

　　3. 必须在这个元素加入DOM树前设置它的innerHTML

举个例子：

// 创建一个仅存在于内存中的元素
var el = document.createElement('div');
// 设置innerHTML
el.innerHTML = '<a onclick = "testFn()">Test Link</a>';
// 加入DOM树
document.body.appendChild(el)

这种写法很常见对吧，但你根本察觉不到有内存泄漏。唯一的隐患在于，当你在一个相同的页面上频繁地用这种方式设置innerHTML，一次又一次，反反复复，没完没了，好吧，其实也没那么多次，总之是很多次之后，就会出现问题了。

肯定有人会说，谁那么蛋疼地总折腾一个元素，其实在ajax泛滥的时代，经常需要动态更新页面，所以这种情况也并非罕见。

如果实在不信，这里有两个DEMO页面:

泄漏DEMO

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

	<head>

		<title>IE innerHTML Memory Leak Demo</title>

		<style type = "text/css">

			html,body

			{

				font-family: arial;

				font-size: 120%;

			}

			div a

			{

				font-size: 120%;

				display: block;

				margin: 5px;

				padding: 5px;

				border: 2px solid #000;

				background-color: lightgreen;

			}

		</style>

		<script type = "text/javascript">

			var btnStart, btnStop;

			function init()

			{

				btnStart = document.getElementById('btnStart');

				btnStop = document.getElementById('btnStop');

				btnStart.onclick = startLeak;

				btnStop.onclick = stopLeak;

			}

			function startLeak()

			{

				btnStart.disabled = true;

				btnStop.disabled = false;

				leak();

			}

			function stopLeak()

			{

				btnStop.disabled = true;

				btnStart.disabled = false;

			}

			function leak()

			{

				if (btnStop.disabled == true)

				{

					return;

				}

				var str = '';

				var i, len = 2000;

				for (i = 0; i < len; i++)

				{

					str += '<a onclick = "test()">Test Link</a>';

				}

				var elem = document.getElementById('testDiv');

				if (elem) document.body.removeChild(elem);

				var elem = document.createElement('div');

				elem.id = 'testDiv';

				// Oops!  Setting .innerHTML first, and _then_ calling .appendChild(..) is asking for a memory leak!

				elem.innerHTML = str;

				document.body.appendChild(elem);

				setTimeout(leak, 250);

			}

			function test()

			{

				alert('Click!');

				return false;

			}

			window.onload = init;

		</script>

	</head>

	<body>

		<h1>IE innerHTML Memory Leak Demo</h1>

		<p>Upon clicking the "Start Leak" button, a script will execute repeatedly which creates a new <div> element in memory,

		sets its innerHTML to a string of 2000 <a> tags with onclick events wired up ('<a onclick = "test()">Test Link</a>'),

		and then adds that <div> to the

		page.</p>

		<p>Letting this script run for about 60 seconds, and using Perfmon to monitor memory consumption, you should notice a significant

		increase in the amount of memory consumed.  To see the same script logic that doesn't leak memory, view the

		<a href = "./noleak.html">No Leak Page</a>.</p>

		<button id = "btnStart">Start Leak</button>

		<button id = "btnStop" disabled = "disabled">Stop Leak</button>

	</body>

</html>

　　

不泄露DEMO

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

	<head>

		<title>IE innerHTML Memory Leak Demo (the fix)</title>

		<style type = "text/css">

			html,body

			{

				font-family: arial;

				font-size: 120%;

			}

			div a

			{

				font-size: 120%;

				display: block;

				margin: 5px;

				padding: 5px;

				border: 2px solid #000;

				background-color: lightgreen;

			}

		</style>

		<script type = "text/javascript">

			var btnStart, btnStop;

			function init()

			{

				btnStart = document.getElementById('btnStart');

				btnStop = document.getElementById('btnStop');

				btnStart.onclick = startLeak;

				btnStop.onclick = stopLeak;

			}

			function startLeak()

			{

				btnStart.disabled = true;

				btnStop.disabled = false;

				leak();

			}

			function stopLeak()

			{

				btnStop.disabled = true;

				btnStart.disabled = false;

			}

			function leak()

			{

				if (btnStop.disabled == true)

				{

					return;

				}

				var str = '';

				var i, len = 2000;

				for (i = 0; i < len; i++)

				{

					str += '<a onclick = "test()">Test Link</a>';

				}

				var elem = document.getElementById('testDiv');

				if (elem) document.body.removeChild(elem);

				var elem = document.createElement('div');

				elem.id = 'testDiv';

				// Add the element to the DOM first, and /then/ set .innerHTML to prevent memory from leaking.

				document.body.appendChild(elem);

				elem.innerHTML = str;

				setTimeout(leak, 250);

			}

			function test()

			{

				alert('Click!');

				return false;

			}

			window.onload = init;

		</script>

	</head>

	<body>

		<h1>IE innerHTML Memory Leak Demo (the fix)</h1>

		<p>Upon clicking the "Start Leak" button, a script will execute repeatedly which creates a new <div> element in memory and

		then adds that element to the page.  Only <em>after</em> the element has been added to the page, do we set its .innerHTML to a

		string to 2000 <a> tags with onclick events wired up ('<a onclick = "test()">Test Link</a>').</p>

		<p>Letting this script run for about 60 seconds, and using Perfmon to monitor memory consumption, you should notice that,

		unlike the <a href = "./leak.html">Leak Page</a>, memory consumption remains relatively constant.</p>

		<button id = "btnStart">Start Leak</button>

		<button id = "btnStop" disabled = "disabled">Stop Leak</button>

	</body>

</html>

　　

接着来看怎么解决它：

其实很简单，换个顺序，先把元素加入DOM树，再设置innerHTML。

当然你也可以完全放弃使用innerHTML，这样做好处多多，比如不会存在未解除事件绑定的情况，但貌似完全放弃innerHTML也不现实。。。

innerHTML引起IE的内存泄漏的更多相关文章

  1. 关于Javascript的内存泄漏问题的整理稿

    写了好长时间javascript小功能模块,从来没有关注过内存泄漏问题.记得以前写C++程序的时候,内存泄漏是个严重的问题,我想是时候关注一下了.网上找了篇文章,Mark一下.原文地址:http:// ...

  2. JS内存泄漏 和Chrome 内存分析工具简介（摘）

    原文地址:http://web.jobbole.com/88463/ JavaScript 中 4 种常见的内存泄露陷阱   原文:Sebastián Peyrott 译文:伯乐在线专栏作者 - AR ...

  3. JavaScript中的内存泄漏以及如何处理

    随着现在的编程语言功能越来越成熟.复杂,内存管理也容易被大家忽略.本文将会讨论JavaScript中的内存泄漏以及如何处理,方便大家在使用JavaScript编码时,更好的应对内存泄漏带来的问题. 概 ...

  4. JavaScript如何工作:内存管理+如何处理4个常见的内存泄漏

    摘要: 作者将自己常用的JavaScript模块分享给大家. 原文:JavaScript如何工作:内存管理+如何处理4个常见的内存泄漏 作者:前端小智 Fundebug经授权转载,版权归原作者所有. ...

  5. 【进阶1-5期】JavaScript深入之4类常见内存泄漏及如何避免(转)

    这是我在公众号(高级前端进阶)看到的文章,现在做笔记 https://mp.weixin.qq.com/s/RZ8Lpkyk8lz6z5H8Q8SiEQ 垃圾回收算法 常用垃圾回收算法叫做**标记清除 ...

  6. JavaScript中的垃圾回收和内存泄漏

    摘要: JS内存管理. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 程序的运行需要内存.只要程序提出要求,操作系统或者运行时就必须供给内存.所谓的内存泄漏简单来说是不再用到的 ...

  7. innerHTML与IE浏览器内存泄露问题

    使用 sIEve 扫描和筛选 如果大量使用 JavaScript 和 Ajax 技术开发 Web 2.0 应用程序,您很有可能会遇到浏览器的内存泄漏问题.如果您有一个单页应用程序或者一个页面要处理很多 ...

  8. How Javascript works (Javascript工作原理) (三) 内存管理及如何处理 4 类常见的内存泄漏问题

    个人总结: 1.两种垃圾回收机制: 1)引用标记算法:如果检测到一个对象没有被引用了,就清除它. ***这种算法不能处理循环引用的情况*** 2)标记—清除算法:从根(全局变量)开始向后代变量检测,任 ...

  9. Chrome 浏览器垃圾回收机制与内存泄漏分析

    Chorme 浏览器中的垃圾回收和内存泄漏 垃圾回收 通常情况下,垃圾数据回收分为手动回收和自动回收两种策略. 手动回收策略,何时分配内存.何时销毁内存都是由代码控制的. 自动回收策略,产生的垃圾数据 ...

随机推荐

  1. hdu 超级楼梯 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2041 哦--对了,这些题读者可以直接忽略,我只是想练习一下自己薄弱的地方...... 题目意思我就不说 ...

  2. WAS域名解析问题

    1.如果dmgr和his在一台机器上,但web服务器用的是app服务器 如下图: 插件都处理完成. 这时候,通过外网域名访问时,出现如下情况 或者 说明:ihs服务器上webserver1的文件Plu ...

  3. 用JS或jQuery访问页面内的iframe

    用JS或jQuery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的!假设有两个页面,在相同域下.index.html 文件内含有一个iframe: <!DOCTYPE ...

  4. codeforces 665E E. Beautiful Subarrays(trie树)

    题目链接: E. Beautiful Subarrays time limit per test 3 seconds memory limit per test 512 megabytes input ...

  5. 屏幕适配-使用autoLayout

    当遇见xib中无法删除的控件时. 将这个错误的控件拖离本xib(第一个元素.xib文件是有许多元素组成的集合),确保这个xib是正确的.重新创建一个xib文件,将这个正确的xib元素整个复制过去. 在 ...

  6. Linux命令排查线上问题常用的几个

    排查线上问题常用的几个Linux命令 https://www.cnblogs.com/cjsblog/p/9562380.html top 相当于Windows任务管理器 可以看到,输出结果分两部分, ...

  7. web项目中url-pattern改成'/'后，js、css、图片等静态资源（404）无法访问问题解决办法

    感谢http://blog.csdn.net/this_super/article/details/7884383的文章 1.增加静态资源url映射 如Tomcat, Jetty, JBoss, Gl ...

  8. node安装升级npm

    安装npm npm上有很多优秀的nodejs包,来解决常见的一些问题,比如用node-mysql,就可以方便通过nodejs链接到mysql,进行数据库的操作 在开发过程往往会需要用到其他的包,使用n ...

  9. UI控件初始化问题：initWithFrame和initWithCoder、aweakFromNib的执行

    在iOS学习和程序开发过程中,我们经常会遇到一些自定义UI控件或控制器在初始化时出现问题,尤其在大家刚开始接触时,几种初始化方法的作用以及调用的时机往往容易混淆,这也跟我们对iOS程序设计中,类的创建 ...

  10. 启动和测试oracle是否安装成功

    转自:https://www.cnblogs.com/justdo-it/articles/5112576.html 测试步骤1:请执行操作系统级的命令:tnsping orcl 测试步骤 2:请执行 ...