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

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. html5--3.2 input元素(2)

    html5--3.2 input元素(2) 学习要点 input元素及其属性 input元素 用来设置表单中的内容项,比如输入内容的文本框,按钮等 不仅可以布置在表单中,也可以在表单之外的元素使用 i ...

  2. JS DOM1核心概要document

    Document类型: document对象表示整个html页面,而且,document对象是window对象的一个属性: 文档信息:document.title,表示当前页面的标题: documen ...

  3. 「LuoguT36048」 Storm in Lover

    Description 平成二十四年(2012年),5月11日,东京,某弓道场. "呐,呐,海未酱,你听说了吗?几天后的那场弓道大会?啊-!"橙发少女兴奋地拿着一张传单一样的纸跑向 ...

  4. [AHOI 2005] 航线规划

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1969 [算法] 首先离线 , 将删边操作转化为加边操作 不妨首先将这张图按边-双连通 ...

  5. 【USACO】 Balanced Lineup

    [题目链接] 点击打开链接 [算法] 这是一道经典的最值查询(RMQ)问题. 我们首先想到线段树.但有没有更快的方法呢?对于这类问题,我们可以用ST表(稀疏表)算法求解. 稀疏表算法.其实也是一种动态 ...

  6. 使用webpack报错

    意思是: 意思是CLI被移动到了一个专门的包 webpack-cli里了.请安装webpack-cli 的除了webpack本身使用cli当用npm时,使用npm install webpack-cl ...

  7. iconMoon---小图标小记

    IcoMoon 是一个免费的图标库.可以下载自己需要的图标 三.使用流程.操作演示 进入主页,点击下图所示区域开始: 每个图标你都是可以自己进行标记的(移上去会看到Edit, 点击之),然后—— 注: ...

  8. CS231n 2016 通关 第一章-内容介绍

    第一节视频的主要内容: Fei-Fei Li 女神对Computer Vision的整体介绍.包括了发展历史中的重要事件,其中最为重要的是1959年测试猫视觉神经的实验. In 1959 Harvar ...

  9. 介绍一下Extern “C”，它的作用是什么?

    Extern “C”是由C++提供的一个连接交换指定符号,用于告诉C++这段代码是C函数.这是因为C++编译后库中函数名会变得很长,与C生成的不一致,造成C++不能直接调用C函数,加上extren “ ...

  10. poj1163 【记忆化搜索·水】

    题意: 一个这样的三角形,他可以往下的左或者往下的右走.求一个在最后一行的最大. 思路: 额...就是搜一下..记录一下...肯定有重合的情况. code- //#include <bits/s ...