Javascript内存泄漏/性能问题？

Question

我只是不能为我的生活弄清楚这个在Internet Explorer中的内存泄漏。

insertTags simple需要字符串str，并将每个单词放在HTML的开始和结束标记（通常是锚定标记）中。 transliterate代表阿拉伯数字，用&＃代替正常数字0-9。他们的阿拉伯同行的XML身份。

fragment = document.createDocumentFragment(); 
for (i = 0, e = response.verses.length; i < e; i++) 
{ 
    fragment.appendChild((function(){ 
     p = document.createElement('p'); 
     p.setAttribute('lang', (response.unicode) ? 'ar' : 'en'); 
     p.innerHTML = ((response.unicode) ? (response.surah + ':' + (i+1)).transliterate() : response.surah + ':' + (i+1)) + ' ' + insertTags(response.verses[i], '<a href="#" onclick="window.popup(this);return false;" class="match">', '</a>'); 
     try { return p } finally { p = null; } 
    })()); 
} 
params[0].appendChild(fragment); 
fragment = null; 

我会爱比MSDN和about.com其他一些链接，因为他们都没有，为什么我的脚本发生内存泄漏已充分向我解释。我相信这是问题，因为没有它，所有的东西都运行得很快（但没有任何显示）。

我读过，做大量的DOM操作可能是危险的，但for循环最多286次（古兰经2中最古老的surah中的＃节）。

*内存泄漏在IE7和IE8，不知道6，但在Safari 4的工作完全正常，FF 3.6，歌剧10.5，Chrome的5 ... *

Answer 1

变量作用于函数，而不是/ else/for/while /等。块。每次拨打电话

fragment.appendChild((function() { ... 

您正在创建新功能（新范围）。这个新函数引用了i和response变量。所以现在，i和response的作用范围都是外部功能和新功能。

这还不足以泄漏内存。 （i和response是正常的变数，将走出去的范围外的新功能完成后）

，但在创建新功能的p DOM元素，并在外部函数引用它（你回吧作为参数的fragment.appendChild调用）。现在想一想：您有外部范围fragment引用从内部作用域创建的一个p DOM，需要使用外部作用域的i和response变量来首先创建DOM元素。

fragment和p DOM对象中的每一个都互相引用。尽管您试图通过将变量指针置零来清零引用计数，但p=null和fragment = null不会摆脱所有引用。 fragment仍然有一个内部参考p，它仍然有一个参考外部response变量。由于这种剩余的循环依赖性，两个“范围”将永远不会被垃圾收集。

任何人，如果我犯了错误，请纠正我。

---

至于解决方案，只是不要使用内部功能！

fragment = document.createDocumentFragment(); 
for (var i = 0, var e = response.verses.length; i < e; i++) 
{ 
    var p = document.createElement('p'); 
    p.setAttribute('lang', (response.unicode) ? 'ar' : 'en'); 
    p.innerHTML = ((response.unicode) ? (response.surah + ':' + (i+1)).transliterate() : response.surah + ':' + (i+1)) + ' ' + insertTags(response.verses[i], '<a href="#" onclick="window.popup(this);return false;" class="match">', '</a>'); 
    fragment.appendChild(p); 
} 
params[0].appendChild(fragment); 

Answer 2

我真的不能告诉你为什么 IE据说会泄漏内存，但是这段代码对于它的功能相当复杂。这条线似乎是高度可疑和多余的：try { return p } finally { p = null; }。

如何简化它有点和范围的变量：

var fragment = document.createDocumentFragment(); 
var p, t; 
for (var i = 0; i < response.verses.length; i++) 
{ 
    p = document.createElement('p'); 
    if (response.unicode) { 
     p.setAttribute('lang', 'ar'); 
     t = (response.surah + ':' + (i+1)).transliterate(); 
    } else { 
     p.setAttribute('lang', 'en'); 
     t = response.surah + ':' + (i+1); 
    } 
    p.innerHTML = t + ' ' + insertTags(response.verses[i], '<a href="#" onclick="window.popup(this);return false;" class="match">', '</a>'); 
    fragment.appendChild(p); 
} 
params[0].appendChild(fragment); 
fragment = p = t = null; // likely unnecessary if they go out of scope anyway 

这仍然是很多DOM操作的，虽然，这可能会慢JavaScript引擎一段时间。

Answer 3

如果您从链接中删除onclick属性，它会泄漏吗？

您可以尝试删除重复的onclick并将其替换为事件代理。

此外，您的所有变量似乎都在全局范围内 - 不应该像导致您所看到的问题一样糟糕，但无论如何您都应该解决该问题。

Answer 4

虽然答案已被接受，我觉得这也可以做这项工作：

var fragment = document.createDocumentFragment(); 

for (var i = 0, e = response.verses.length; i < e; i++) { 
    fragment.appendChild((function(p){ // Create a scope here itself :) 
     p = document.createElement('p'); // ?? without above, it was a global scope 
     p.setAttribute('lang', (response.unicode) ? 'ar' : 'en'); 
     p.innerHTML = ((response.unicode) ? (response.surah + ':' + (i+1)).transliterate() : response.surah + ':' + (i+1)) + ' ' + insertTags(response.verses[i], '<a href="#" onclick="window.popup(this);return false;" class="match">', '</a>'); 
     try { return p } finally { p = null; } 
    })()); 
} 
params[0].appendChild(fragment); 
fragment = null; 

原因内存泄漏：正在创建关闭和匿名函数返回，然后更让但当作垃圾回收，因为fragment在使用它

因此该解决方案可为提供词汇范围简单，秀n以上