清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
2017-08-14 16:57
633 查看
一、清空元素的区别
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 ); }
以上就是小编为大家整理的清空元素html("")、innerHTML="" 与 empty()的区别和应用的全部内容啦~希望能够帮助到各位朋友~~
您可能感兴趣的文章:
相关文章推荐
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别 、remove()区别
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的差别:关于内容泄露问题
- [JS框架推荐]简述JQuery,Extjs,YUI,Prototype,Dojo等JS框架的区别和应用场景
- 关于区别docuemnt.write()和document.getELementById().innerHTML=""
- javascript innerHTML、outerHTML、innerText、outerText的区别
- html(),empty(),text() 的区别
- HTML CSS列表元素ul,ol,dl的研究与应用
- JavaScript DOM杂知识(value/innerHTML/innerText/textContent对比、nodeType/nodeName/nodeValue区别、获取任意类型的属性)
- js innerhtml outerhtml 区别
- JS中innerHTML createTextNode innerText outerHTML 区别
- DIV元素和SPAN元素的区别和应用
- HTML header元素的应用
- HTML中行内元素与块级元素有哪些及区别?
- HTML中行内元素与块级元素有哪些及区别 (网易博客)
- js中innerText/value/innerHTML三个属性的区别
- jquery删除、清空<div>之间的内容---empty()与remove()区别
- html中标签、属性、元素的区别