正文

[JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的差别：关于内容泄露问题

IP云V管理员/2022-11-29/6 阅读

11/29

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

清空元素html("")、innerHTML="" 与 empty()的差别

一、清空元素的差别

     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()的区别、remove()区别
清空元素html("").innerHTML="" 与 empty()的区别一.清空元素的区别 1.错误做法一: $(" ...

js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选
转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...

js jquery 判断元素是否在数组内
js jquery 判断元素是否在数组内一,js方法 var arr = ["a", "b", "c"]; // js arr.index ...

js/jquery获取元素，元素筛选器
1.js获取元素 var test = document.getElementById("test"); var parent = test.parentNode; // 父节点 ...

js+jquery创建元素
例:创建如下标签: <a id="baidu" class="link" name="baidu">这是一个链接</a&g ...

jQuery清空元素和克隆元素
1.清空 $(function () { $('#btn').click(function () { $('#ul1').html('') $('#ul1').empty() $('#ul1').re ...

记一次使用jQuery清空元素
缘由: 数据量比较大,分页显示,页码是自己写的,动态创建页码,创建元素时会绑定元素的click事件,每次显示五个页码(1,2,3,4,5),点击2—4不换,点5,页码变成3,4,5,6,7. 遇到的问 ...

js jquery 判断元素是否在数组内(转)
一,js方法 var arr = ["a", "b", "c"]; // js arr.indexOf("c") var ...

js JQuery 获取元素和遍历
用户名<input class="yonghu" type="text" id="user" name="u" / ...

随机推荐

css选择器位置和数量技巧
1. 除去首个元素 li:not(:first-child) li + li li:first-child ~ li 2. 第1-3个元素 li:nth-child(-n+3) 3. 除去第1-3个元 ...

NOIP2017赛前模拟10月30日总结
题目1: n个人参赛(n<=100000),每个人有一个权值··已知两个人权值绝对值之差小于等于K时,两个人都有可能赢,若大于则权值大的人赢···比赛为淘汰制,进行n-1轮·问最后可能赢的人有多 ...

平滑升级nginx
平滑升级nginx版本技术文档作者联系方式日期版本号马坤 852115346@qq.com 2017-12-31 V1.0.0 备注:作者水平有限,难免出现错误.如若发现错误,请您及时与作者 ...

两个Vue Demo
1 实现 person list <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

【01】react 之 hello world
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西 ...

P1143 飘飘乎居士的约会
P1143 飘飘乎居士的约会时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景一阵狂风吹过只听“pong”的一声,飘飘乎居士降落了!!! 描述又是美妙 ...

【BZOJ4504&&Hihocoder1046】K个串（主席树，堆）
题意:一个长度为n的数字序列,选出其中的一个连续子串,然后统计其子串中所有数字之和(注意这里重复出现的数字只被统计一次)询问第k大的和是多少 1 <= n <= 100000, 1 &lt ...

dva脚手架 dva-cli 配置roadhogrc，antd-mobile样式按需加载不生效的问题
1.新安装dva-cli脚手架版本0.9.2,dva版本是2.4.1,roadhogrc版本是2.4.9 roadhogrc2 与1 的区别把roadhogrc 改成了webpackrc 所以配置an ...

图表插件echars的使用案例
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

ef core 使用include进行外键连接查询
在entity framework core中,如果两个实体涉及到外键连接,查询的时候默认是只查自身而不会去查询外键表的.如果想要让查询结果包含外键实体,则需要使用include方法来让查询结果包含外 ...

相关阅读

目录[+]