动态创建的元素和单击处理程序会导致IE9内存泄漏
Dynamically created elements and click handlers cause memory leak in IE9
脚本很长,所以我会尝试解释而不是粘贴所有脚本。编辑:看起来我确实需要显示更多。
我每秒用新内容更新UL几次(调用updateDomTree)。DOM树表示CKEditor内部的元素。
function updateDomTree(editor) {
var selection = editor.getSelection();
var jqElements = $(document.createElement('div'));
var editorData = editor.document.getBody();
var kids = editorData.getChildren();
// Gather LI to represent Editor content DOM element hierarchy
for (var i = 0, len = kids.count(); i < len; i++) {
jqElements.append(HandleNode(kids.getItem(i), selectedElement, editor));
}
var domUL = document.createElement('ul');
domUL.id = "dom";
var jqUL = $(domUL).append(liElements);
$(document.getElementById('dom')).replaceWith(jqUL);
}
// This is a recursive function, but it has no other issues than the memory leak
// If I comment out the click event, it works fine.
// The **obj** variable is why I don't use the "delegation" method.
function HandleNode(obj, selection, editor) {
// do other stuff, handle recursion etc.
liElement.on('click', function(e) {
editor.getSelection().selectElement( obj );
editor.focus();
editor.getSelection().scrollIntoView();
e.stopPropagation();
});
return liElement;
}
现在在IE9中,内存使用率开始迅速攀升。如果我注释掉点击处理程序,内存泄漏就会消失,但我就没有任何功能了。我该如何解决这个问题?
另一种解释是:#dom是dom结构的UL可视化表示,我需要单击事件来引用元素,这就是为什么我在创建单击事件处理程序时需要对象引用。当底层DOM发生变化时,UL表示应该反映这种变化,这就是快速更新的原因。
您可以使用事件委派并将一个单独的处理程序绑定到ul
本身,而不是每次创建li
元素时都创建一个新的处理程序:
// when you create the list :
$('#dom').on('click', 'li', function(e) {
// do some cool stuff
e.stopPropagation();
});
// instead of creating a new ul,
// replace thhe existing ul's content
$('#dom').empty().append(liElements);
如果您需要为每个节点存储自定义数据,请尝试使用.data()
函数:
$(liElement).data('obj', obj);
然后您可以从处理程序访问它:
$('#dom').on('click', 'li', function(e) {
var obj = $(this).data('obj');
...
e.stopPropagation();
});
有了这种设计,javascript就不必维护一个实时闭包来保持对obj
变量的访问。我不能百分之百确定它会把你的内存泄漏吹走,你必须测试一下。
将其委派到UL级别,只需设置它,直到UL元素DOM可用:
$('#dom').on('click','li', function(e) {
// do some cool stuff
e.stopPropagation(); //stopPropagation couldn't give you expected result depending why you need to stop bubbles and at which level, check it.
});
相关文章:
- Angular JS IE9 Hashbang url rewriting
- 在Twitter上用ie9中的空白src访问iframe的contentWindow
- 在IE9中的输入字段中输入焦点最近按钮
- 为什么jQuery 1.8不能在IE8和InternetExplorer9中使用?(截至2012年9月的IE9最新版本)
- IE9的HTML5 Canvas getImageData()函数存在问题
- 使用JavaScript在IE9中获取数据列表选项
- Ajax模式下的Jquery Select2 V4在IE9中不起作用
- 重复应用 d3 转换导致的内存泄漏
- IE7中的blockUI插件内存泄漏25kb
- jQuery无法在IE9中隐藏选项
- Javascript闭包-如何防止内存泄漏
- 对象为null或IE9中存在未定义错误
- IE9抛出错误的reactJs
- 使用jquery创建dom元素会导致ie9出现拒绝访问错误
- 如何避免IE9上定期AJAX请求时内存泄漏
- ID属性为的动态DOM对象的IE9内存泄漏
- 动态创建的元素和单击处理程序会导致IE9内存泄漏
- 自定义延迟加载- IE9内存泄漏
- IE9内存泄漏
- 仅在IE9标准模式下asp.net javascript内存泄漏