问题代码:
首先看下面一段代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type" />
<script src="jquery-1.3.2.js" type="text/javascript">
</script>
<style type="text/css">
#inner {
margin:0 auto;
width:150px;
height:50px;
border:1px solid green;
}
</style>
<script type="text/javascript">
$(function(){
$("#inner").click(function(){
//错误,引起内存泄露
$("#test")[0].innerHTML="";
//正确做法
//$("#test").empty();
});
});
</script>
<title>测试</title>
</head>
<body>
<div style="height:500px;width:500px;border:1px solid red;padding-top:100px;" id="test">
<div id="inner">click to remove me</div>
</div>
</body>
</html>
场景:
inner div 就是常见的我们可能使用 ajax 从服务器动态构造的元素,或者注入的片断html,效果为点击 inner 后就把它以及它的兄弟清除出去,依照传统的思路,直接 innerHTML =“” 就好了 ,可能你会想到所有删除元素的事件监听器应该清楚掉,但是对于除了 ie6 (引起内存泄露)以外的浏览器,清除事件监听器不是必要的 。
jquery 机制:
但是可以确定的是在 jquery 中用 innerHTML 的方法来清空元素,是必然会导致内存泄露的,由于 jquery 对于同一元素多事件处理没有直接采用浏览器事件模型,而是自己缓存事件,遍历触发,以及便于 trigger 程序触发 :
// Init the element's event structure
var events = jQuery.data(elem, "events") || jQuery.data(elem, "events", {}),
handle = jQuery.data(elem, "handle") || jQuery.data(elem, "handle", function(){
// Handle the second event of a trigger and when
// an event is called after a page has unloaded
return typeof jQuery !== "undefined" && !jQuery.event.triggered ?
jQuery.event.handle.apply(arguments.callee.elem, arguments) :
undefined;
});
采用 data 方法,将一些数据关联到了元素上面,上述事件即是采用该机制缓存事件监听器。
那么就可以知道,直接 innerHTML=“” 而不通知 jquery 清空与将要删除元素关联的数据,那么这部分数据就再也释放不了了,即为内存泄露。
解决:
jquery 已经想到了这一方面,提供了 empty 函数,其思想就是,对节点的所有子,孙,重孙.....节点( $("*",this) ),先清空它们关联的数据,再进行节点的删除:
remove: function( selector ) {
if ( !selector || jQuery.filter( selector, [ this ] ).length ) {
// Prevent memory leaks
jQuery( "*", this ).add([this]).each(function(){
jQuery.event.remove(this);
jQuery.removeData(this);
});
if (this.parentNode)
this.parentNode.removeChild( this );
}
},
empty: function() {
// Remove element nodes and prevent memory leaks
jQuery(this).children().remove();
// Remove any remaining nodes
while ( this.firstChild )
this.removeChild( this.firstChild );
}
分享到:
相关推荐
innerHTML的使用document.getElementById("id").innerHTML = "contenttext";
注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是 jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的...
简单日历和innerHTML使用 javascript的简单应用实例 可以自定义Css
innerHTML的简单应用
今天遇到jquery中的html方法使用不了,只能用完最基本的innerHTML把内容展示出来。具体原因还没找到,肯定跟内容有关,展示不了的html放上来供以后检查原因,是我收到csdn的一封邮件。 <!DOCTYPE ...
tbody[removed]='<tr><td>IE下tbody的innerHTML是只读的</td></tr>’; //在IE下报错,目标对象错误 现在用jquery的html试试, 代码如下: $(tbody).html(‘<tr><td>IE下tbody的innerHTML是只读的</td></tr>’); ...
注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的...
Innerself – 使用innerHTML将React / Redux转换成50行代码
jQuery快速开发资料jQuery案例 代码 素材 笔记 作业资料,学习资料 01-getElementById获取元素.html 02-getElementsByTagName获取某些元素.html 03-H5新增获取元素方式(1).html 04-获取特殊元素.html 05-事件三要素....
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中: $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载(就绪)之前运行 jQuery...
JQ 选择器大全包含:基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手
博文链接:https://aideqianfang.iteye.com/blog/246585
千锋Web前端教程_48_日期对象_定时器和innerhtml
解决ajax返回innerHTML中javascript不能运行问题
js中innerHTML与innerText的用法与区别
innerHTML属性 IE还是两个a加一个空格, Chrome则是原始输入的样子。 回车 当在DIV中输入”a[回车][任意个空格]a”时,HTML呈现Chrome和IE是一样的。 innerHTML属性 IE是3个字符,在两个a中间加了个空格。 Chrome则...
超全面javaweb第4天-_08_innerHTML属性
jquery仿淘宝的评价插件 function loading(starId){ var oStar = document.getElementById(starId); var aLi = oStar.getElementsByTagName("li"); var oUl = oStar.getElementsByTagName("ul")[0]; var oSpan ...
注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。 HTML 代码: <img/><img/> jQuery 代码: $("img").each(function(i){ this.src = "test" + i + ".jpg"; }); 结果: [ , <img src="test1.jpg" /> ] ---...
NULL 博文链接:https://wuzhengxuan.iteye.com/blog/1263906