[JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
2014-11-05 09:45
507 查看
清空元素html("")、innerHTML="" 与 empty()的区别
二、原理:
在 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 清空与将要删除元素关联的数据,那么这部分数据就再也释放不了了,即为内存泄露。
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 );
}
一、清空元素的区别 1、错误做法一: $("#test").html("");//该做法会导致内存泄露
2、错误做法二: $("#test")[0].innerHTML=""; ;//该做法会导致内存泄露
3、正确做法:
//$("#test").empty();
二、原理:
在 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 清空与将要删除元素关联的数据,那么这部分数据就再也释放不了了,即为内存泄露。
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 );
}
相关文章推荐
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的差别:关于内容泄露问题
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别 、remove()区别
- jquery删除、清空<div>之间的内容---empty()与remove()区别
- JS中:关于form中的Checkbox的操作: document.getElementsByName("name"),如何取消选中状态,如何将文本框内容清空
- 清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
- html <"input "/>关于value 空格后的内容消失的问题
- 关于区别docuemnt.write()和document.getELementById().innerHTML=""
- jQuery中empty与html("")的区别对比
- 关于JS下offsetLeft,style.left,以及jquery中的offset().left,css("left")的区别。
- 关于response.setContentType("text/html; charset=UTF-8");乱码问题
- 关于保存*.js是出现some character can not mapped using "iso-8859-1" 的问题解决见解
- jquery的元素的文本内容与HTML内容操作的区别
- 关于js中onclick字符串传参问题(html="")
- jQuery在异步请求数据返回后,调用$("selector").html(data.content);之后因为一些特殊字符或者',"不能显示内容的问题解决办法
- 在document.getElementById("oDiv").innerHTML="JS执行问题";
- JQuery判断数组中是否包含某个元素$.inArray("js", arr);
- document.getElementById("DIV名").innerHTML = "你要更新的内容"
- jquery在<div>之间新增内容---html()和append()及after()区别