魔鬼的梦魇—验证IE中的js内存泄露模式（续）-优快云博客

本文通过实验展示了IE浏览器中iframe可能导致的内存泄露问题，特别是在动态创建DOM元素的情况下。通过对不同场景的测试，揭示了刷新iframe时内存泄露的具体表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

魔鬼的梦魇—验证IE中的js内存泄露模式（续）

前面几篇文章我们验证学习了Justin Rogers文章中提出的集中泄露模式，但是其中并没有介绍Iframe的内存泄露情况；其中的各种原因，我觉的虽然当时ajax的兴起，极大地促进了web应用程序的开发和发展，但是并没有涉及到大规模的动态更新页面DOM元素，所以这个时候的泄露都不至于会引起大家的关注；但是随着大量js类库框架的出现，特别是extjs的出现，功能丰富界面漂亮美观，同时提供了大量丰富的前端控件，顿时使人眼前一亮，很多人都会不由的感到震撼，原来bs也可以做出这么优美酷炫的界面；特别是最近移动互联网的风行，很多复杂的应用都转移到了前段，这些复杂的应用基本上展现基本上都会涉及到动态创建DOM，同时很多应用也会使用iframe，这就会导致内存泄露的滋生；如果你的应用足够复杂，那么泄露的情况也会十分严重，甚至导致浏览器崩溃。

我们先来看一下“史前时代”，使用iframe是否存在内存泄露，泄露的情况如何？我们新建一个普通的静态html页面；然后我们在一个包含iframe的页面中，通过点击按钮不断的刷新iframe，具体代码如下

iframe嵌套的静态html页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> UnLeakIFrameContent </body> </html>

包含iframe的页面

从代码中，我们可以看到没有任何的循环引用和动态的DOM创建，自然我们刷新整个包含iframe的页面也不会有内存泄露，使用sIEve测试也证明了这一点。

图 1. 刷新iframe中嵌套静态网页内存泄露情况

如果我们不断的点击页面中的按钮，来不断的刷新iframe，这个时候是否有内存泄露呢？从下图的测试数据来看，我们看到泄露的确是存在的，只是泄露的数目并没有随刷新的次数递增，所以我猜想是IE缓存了iframe的页面对象的DOM。

图 2. Iframe嵌套静态页面，不断刷新iframe的内存泄露情况

那么如果iframe嵌套的页面有动态创建DOM的逻辑的话，那泄露的情况会怎样呢？这次嵌套的页面我们使用extjs中的那个模仿windows桌面的页面(examples/desktop/desktop.html),我们先来看一下这个页面本身是否有泄露问题，从图3中，我们可以看到是没有泄露问题的。

图 3. 直接刷新extjs的desktop例子泄露情况

接下来我们将iframe的嵌套页面改成extjs的desktop.html，通过同样的方式，我们看一下刷新整个页面和不断刷新iframe时，来看一下内存泄露的具体情况；详细代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> var IFrameLeakTester = { frameTagId: "frame" , dynamicDOMUrl: "http://localhost:30000/examples/desktop/desktop.html" , leak: function () { this._leak(true); } , unLeak: function () { this._leak(false); } , _leak: function (leak) { var frame = document.getElementById(this.frameTagId); //网上流传的方法，但是在这种情况下没有什么效果 if (!leak) { this.clear(frame); } frame.src = this.dynamicDOMUrl; } , clear: function (frame) { if (frame) { frame.contentWindow.document.write(""); frame.contentWindow.document.clear(); top.CollectGarbage(); } } }; </script> </head> <body> <div> <input type="button" value="dynamicDOMLeak" onclick="IFrameLeakTester.leak();"/> <input type="button" value = "dynamicDOMUnLeak" onclick="IFrameLeakTester.unLeak();" /> </div> <div> <iframe id="frame" src="UnLeakIFrameContent.htm" height = "500px" width = "100%"> </iframe> </div> </body> </html>

图 4. 刷新嵌套extjs例子的这个页面内存泄露情况

图 5. 不断刷新嵌套extjs例子的iframe内存泄露情况

从图4和图5中，我们可以看到刷新整个页面也是没有泄露的，但是刷新iframe却存在泄露，并且刷新的次数越多泄露越严重。综合前面iframe嵌套静态页面的例子，我们可以知道，IE可以缓存页面本身的DOM，以备再次刷新iframe的同一页面的时候用；但是如果iframe嵌套的页面中新建了DOM元素，那么每次打开这个页面的时候都会新建对应的DOM元素，从而导致严重的内存泄露。

对于怎样应对这种内存泄露的情况，我没有发现行之有效的方法；在网上搜到一些解决的方法，但是我测试了一下（单击dynamicDOMUnLeak按钮），没有什么效果，具体情况如下图