使用jquery append()添加DOM元素似乎会泄漏内存？
使用jQuery的append()方法添加DOM元素可能会导致内存泄漏的问题。当使用append()方法向DOM中添加元素时，实际上是将新的元素插入到现有的DOM树中。如果频繁地使用append()方法添加大量的DOM元素，可能会导致内存占用过高，从而影响页面性能。
为了避免这个问题，可以采取以下几种方式：
- 批量添加：将需要添加的DOM元素先存储在一个变量中，然后一次性使用append()方法将它们添加到DOM中。这样可以减少DOM操作的次数，提高性能。
- 使用文档片段：可以使用jQuery提供的文档片段（DocumentFragment）来批量添加DOM元素。文档片段是一个轻量级的DOM节点容器，可以在内存中进行操作，然后一次性将其添加到DOM中。这样可以减少DOM操作的次数，提高性能。
- 移除不需要的DOM元素：如果已经添加了大量的DOM元素，但后续不再需要使用，可以使用jQuery的remove()方法将其从DOM中移除，以释放内存。
总结起来，为了避免内存泄漏问题，建议使用批量添加、文档片段和及时移除不需要的DOM元素等方法来优化DOM操作。另外，合理管理内存资源也是云计算领域的一个重要方面。
关于jQuery的append()方法和其他相关的DOM操作方法，可以参考腾讯云的jQuery文档：jQuery API 文档。
相关·内容
我正在使用jQuery动态创建JavaScript元素，现在需要针对它们存储JavaScript数据。但是，我现在担心内存泄漏，因为我从来没有对我的对象调用“删除”。我'.append‘和'.detach’他们，但从来没有。jQuery的文档似乎表明，我应该调用remove来清理它在对象-事件、数据等上的足迹。
这在现代浏览器中是绝对必要的吗?还是对元素的任何引用的消失对我来说都是必要的？
另一种表达我的问题的方法:这个脚本片段会漏出内存吗？
function createElement()
{
var newDiv = $("<div>&#
浏览 5提问于2013-11-15得票数 6
回答已采纳
因此，我有一个非常简单的角度应用程序，我正在试图找出是什么导致分离的DOM树显示在铬分析器中。例如，当您加载此页面时：
我得到了两个独立的DOM树，一个有两个条目，另一个有三个条目。这个页面不使用任何自定义指令，所以它必须是带有角或jQuery的东西，但是我没有看到任何会导致这些分离的DOM树的东西。
问题变得更加严重(如果单击projects链接并执行另一个概要文件，它们中有更多分离的DOM树和条目)，所以我希望如果我能够修复这个非常简单的示例，它将在应用程序的其余部分中级联。
还请注意，我正在使用ui-路由器，然而，我已经尝试了同样的事情，与角的默认路由器，具有相同的结果。甚至不使用的t
浏览 6提问于2013-10-14得票数 26
1回答
在我的web应用程序中，servlet根据业务规则生成一个动态的html页面。我有一个容器div，它总是remais并根据场景更新其内容。假设，首先我们添加一个按钮并在其上绑定一个侦听器。之后，我们不需要该按钮，而用文本字段替换容器内容。
那么事件侦听器呢，为了防止内存泄漏和性能，我必须取消它们吗？
这是一个糟糕的设计，用html方法设置元素吗？用dom或元素创建jquery方法来生成元素更好吗？
目前的结构：
<div id="mainContent">
</div>
当我们添加一个按钮：
$('#mainContent').html(
浏览 4提问于2015-01-13得票数 1
如果我使用jQuery的活动或委托函数为将来要插入到DOM中的元素创建事件处理程序，那么在从DOM中删除这些元素之前是否需要做些什么，这样就不会发生内存泄漏？
THe元素可能会通过jQuery的模板插件添加/删除，如果这样做会有所不同的话。
我还没有找到任何关于这一点的确认，并想确认一下。谢谢!
浏览 0提问于2011-09-13得票数 2
回答已采纳
2回答
我有一个简单的html/javascript代码，它将创建一些DOM，然后删除它们。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></
浏览 2提问于2013-03-09得票数 3
回答已采纳
3回答
下面的代码会不会造成内存泄漏。
根据jQuery文档，使用data函数可以避免内存泄漏。确认以下内容是否安全将非常有用。
var MyClass = function(el) {
// Store reference of element in object.
this.element = $(el);
};
// Store reference of object in element.
$('#something').data('obj', new MyClass('#something'));
浏览 0提问于2011-08-17得票数 11
回答已采纳
javascript中的一些对象可以附加一个方法。例如，我们可以使用Array.prototype.pop = function() {...}
所以我想问的是，我们可以将一个方法附加到DOM元素吗？
假设我有以下内容
var x = document.getElementById("hello");
x.toggle();
如何将名为toggle的方法附加到DOM元素，就像我们在jquery中所做的那样？
非常感谢。
浏览 2提问于2012-05-03得票数 0
我在用缓存做一些花哨的好东西，dhtml。在我ajax下载了感兴趣的页面之后，我将内容存储在一个变量数组中。
HistoryCache[url].load(url, handleRSX);
(本部运作良好)
之后，我执行一个链接修复程序：
$('a', HistoryCache[url]).click(...)
其中，...是将普通链接转换为我的aj外接调用的代码。
在完成所有这些工作之后，我需要将我的新内容.append()到一个专门用来保存新内容的div上。在追加之前，我.remove()之前有任何内容。
Problem：当请求的URL在我的HistoryCache中时，我
浏览 0提问于2011-02-25得票数 1
回答已采纳
我目前正在决定用事件处理程序生成HTML的两种不同方法。我知道这两种方法都是可行的(我见过这两种方法都使用过)，但我不清楚它们各自的优点，而且由于我将继续使用我选择的任何一种方法，所以我希望有人能够为我澄清这些优点。
这里有一个简单的例子来解释这个想法(当然，我的实际案例会更复杂)。假设我们想要一个按钮，提醒“你好鲍勃”。第一种方法是使用我们的视图逻辑生成HTML，然后依赖于一个单独的高级事件处理程序：
$('body').append('<button class="nameAlert" data-name="Bob">Cl
浏览 2提问于2014-02-25得票数 0
1回答
我在一个选项卡式ui路由器应用程序中使用。当我第一次加载选项卡(状态/路由)并呈现表(我在一个视图中有5-10个表)时，性能非常好。但是，一旦我从这个视图导航到其他视图(这些视图可能有或者没有更多的手子表)，表的回复性就会大大降低。我不知道是什么问题，但我在想，也许手表的变量没有被清理？事件？记忆？
我就是这样使用它的(用jquery砖石插件来堆叠表)
下面的片段是ui-view标记的模板：
<div class="row">
<div class="col-md-12">
<div
浏览 3提问于2016-08-03得票数 2
回答已采纳
8回答
可能重复：
我有几个使用jQuery的脚本，我认为其中一个脚本中有一个内存泄漏。
如何分析并找到我所拥有的脚本中使用最多内存/CPU的部分？
浏览 16提问于2010-01-26得票数 27
回答已采纳
在下面的getElementsByTagName("p")[0]和getElementById("demo")中访问相同的元素。
这两项工作都完成了，因此我不知道为什么需要jquery数据函数。是第二个不可移植到所有浏览器。
$(document.getElementsByTagName("p")[0]).data("funcZ", function() {console.log("ZZZZZ")})
$(document.getElementById("demo")).data("fun
浏览 4提问于2012-07-30得票数 1
回答已采纳
var disableSelection = function(){
$("#elementId").attr("disabled","disabled");
};
var enableSelection = function(){
$("#elementId").removeAttr("disabled");
};
我有以下要求：
disable SELECT element为了限制用户选择optionsdisabled SELECT element有一些已选择的选项元素在提交事件上启用
浏览 23提问于2012-04-20得票数 24
我了解更多关于jQuery如何存储数据的知识。
这样做有没有好处：
$('#editCity').data('href', "xx");
var a = $('#editCity').data('href');
或
$('#editCity').attr('data-href', "xx");
var a = $('#editCity').attr('data-href');
还有一个相关的问题。
如果我有这个：
var modal =
浏览 0提问于2012-10-09得票数 1
回答已采纳
我试图编写一些Javascript对象来管理页面上的动态表单。
forms对象存储窗体的数组，并将其呈现到容器中。
我希望对每个表单上的某些字段进行单击事件，因此决定创建一个单独的对象，并尝试在objects init方法中绑定一个事件。
init方法显然是为我添加的每一个新表单触发的。但是，在change事件中，只会为数组中的最后一个form对象触发。
JS Fiddle演示问题
可以找到：
function Form(node) {
this.node = node;
this.init = function() {
$(this.node).find("input
浏览 1提问于2017-03-07得票数 2
回答已采纳
在教程中，他们使用containerElement.rating和starElement.rating来存储评分。
问题是:为什么？？是否可以使用jQuery对象容器和星形，如
container.rating和star.rating?？
在他们的示例中，它是如何工作的：
star.click(function() {
containerElement.rating = this.rating;//What does 'this' refer to?? Star or starElement??
elements.triggerHandler
浏览 5提问于2011-08-06得票数 2
回答已采纳
1回答
我使用递归jQuery AJAX每秒从服务器回调数值。然而，这似乎增加了我的浏览器的内存使用量。
我使用的是FireFox，并且安装了FireBug，我认为它是罪魁祸首，因为它会在控制台中记录每个回调。
我的第一个问题是，我这样说对吗？如果是这样，有没有办法每分钟左右“刷新”一次FireBug，以减少记录的回调？
我的代码示例：
function callBack()
{
$.ajax(......);
setTimeout("callback()", 1000);
}
function Init()
{
callBack();
}
Init();
浏览 0提问于2010-09-28得票数 1
回答已采纳
我有一个带有多个<li>的<ul>，每个都有它的点击处理程序附加在页面加载上。有一个按钮可以对这些<li>进行排序。在我的排序功能中，我对<li>的jQuery元素数组进行了排序，然后将它们附加到<ul>中。通过这种方式，排序可以正常工作，但是所有的<li>都会丢失它们的点击处理程序。我如何保存它们？
var li_array = $('ul li');
li_array.sort( custom_func );
ul.empty().append( li_array.clone(true, true) )
浏览 2提问于2011-02-19得票数 1
回答已采纳
假设您在视图中创建了一个新元素--也就是说，您没有使用el针对页面上的现有元素。
var StudentView = Backbone.View.extend({
tagName: 'article',
className: 'student-name',
template: _.template($('#name-tpl').html()),
render: function(){
var student_tpl = this.template({name: 'Rikard'});
this.$
浏览 2提问于2015-11-21得票数 2
回答已采纳
2回答
我正在做一个游戏，我看到了很多内存消耗，我使用jquery动画，在动画完成后，我.remove()元素，我的问题是，从dom树中删除一个元素后，对象仍然存在于内存中吗？
浏览 2提问于2012-06-15得票数 3
回答已采纳
我看到通过.on()注册的事件处理程序保存在$.cache中。我还看到事件处理程序也保存在$(elem).data()中。
$.cache中保存的对象是指在其上注册事件的DOM节点。当DOM节点被分离时，这会导致内存泄漏，这使得.off()调用成为强制性的。
我遇到了这样一种情况:我不知道DOM节点(我附加了事件处理程序)何时被分离。虽然我可以在代码中保留对该DOM节点的引用并调用.off()进行清理，但这似乎并不好用，因为要知道DOM节点何时被删除并非易事。
做这件事最好的方法是什么？
浏览 0提问于2012-02-16得票数 15
回答已采纳
假设我有一个链接到两个脚本的HTML：
...
<script type="text/javascript" src="general.js"></script>
<script type="text/javascript" src="specific.js"></script>
...
这两个脚本都有自己定义的jQuery的.ready()。
general.js:
jQuery(function() {
var foo;
$('#btn').click(f
浏览 7提问于2012-09-28得票数 1
回答已采纳
这是一个非常简单的网页，它使用jQuery在IE8中泄漏内存(我通过在Windows Task Manager中观察我的iexplore.exe进程的内存使用量随时间增长来检测内存泄漏)：
<html>
<head>
<title>Test Page</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="t
浏览 11提问于2009-09-22得票数 46
回答已采纳
2回答
假设我有这个JQuery代码，它通过它的ID来选择和获取一个元素，而不是将click事件放到它身上：
$( "someID" ).click( dummyCallback );
在后面的代码中，我使用replaceWith()或remove()函数从DOM中删除该元素。
$( "someID" ).replaceWith( "<div>New Element</div>" );
所以这个元素将从DOM中消失，但是绑定到它的事件呢？据我所知，事件也是物体，在记忆中占据空间。
JavaScript/JQuery是否也会清除该对
浏览 4提问于2015-05-12得票数 2
回答已采纳
我正在创建一个jquery将一些数据分配给html对象，问题是当我从插件调用一个方法时，我分配的数据已经不在对象中了。
浏览 0提问于2012-04-05得票数 2
回答已采纳
此jQuery 1.3.2代码向页面添加一个元素，注册一个“单击”事件，然后删除并重新附加该元素：
var button = $('<button>Click me!</button>')
.click(function(){ alert("Hello") })
.appendTo('body');
$('body').html('');
button.appendTo('body');
该按钮如预期的那样出现在页面上，但单击它什么也不做。我想知道为什么从对象中删
浏览 3提问于2010-01-08得票数 6
回答已采纳
我有一组页面，上面有大量的JavaScript :表格排序，AJAX调用，自动完成，动态隐藏和显示页面的区域，等等……我看到的问题是，当页面上的数据变得很大时，离开页面时会出现延迟(浏览器冻结)。当用户单击、关闭浏览器或执行表单提交时，就会出现这种延迟。我想看看问题是不是由JavaScript引起的。我可以使用什么工具来找出答案？Firebug似乎在这种情况下不起作用。
代码库中唯一提到卸载的地方是jquery.js和ui.tabs.js (jquery ui)。
浏览 2提问于2009-03-11得票数 2
回答已采纳
3回答
下面是测试URL
操作步骤：
关闭所有IE实例。
在IE7中打开URL
打开任务管理器，查找IE占用的内存。
现在点击Create按钮，
注意记忆，它会跳到大约2K。
现在单击“销毁”按钮，DIV将被销毁，但内存保持不变。
你可以反复尝试，然后记忆就会增加。
有办法解决这个问题吗？有没有办法在不重新加载窗口的情况下强行调用垃圾收集器？
我假设，当我删除DIV时，内存将被释放，但似乎不是这样工作的。
请告诉我这件事的任何解决办法。
谢谢你的帮助。
苏哈斯
浏览 9提问于2009-02-06得票数 7
回答已采纳
1回答
如果从页面中删除一个元素，它会自动解除绑定吗？或者这是一种应该使用jquery的unbind解除绑定的场景？
我假设这是自动完成的..。
浏览 0提问于2010-12-05得票数 8
回答已采纳
我一直在寻找一个直接的答案(我可以想到很多可能性，但我想知道真正的原因)：
jQuery提供了一个.data()方法，用于将数据与DOM元素对象相关联。是什么使得这是必要的？直接向DOM元素对象添加属性(或方法)有问题吗？那是什么？
浏览 2提问于2009-12-16得票数 25
回答已采纳
1回答
角:垃圾收集组件
、、、
我试图了解组件被销毁后GabageCollector是如何工作的。我有以下情况：
AppComponent：
export class AppComponent {
testCompoments = [1,2];
removeOne(id){
this.testCompoments.pop()
}
nop(){
}
}
AppHTML：
<ng-container *ngFor="let t of testCompoments">
<app-test [id]="t" (close)="remove
浏览 7提问于2020-02-27得票数 0
我的应用程序正在使用jQuery动态添加大量DOM元素。所有这些元素都被放入主容器div中。
然后，每当显示一个新页面时，这个容器div就会使用jQuery的remove()被删除；问题是，这个容器div的所有子节点似乎仍然被列在Chrome的devtools时间线中的“节点”下。
我运行的时间越长，我创建的DOM元素就越多！但是当查看HTML源代码时，节点并不存在。
我的代码：
// creating lots of jquery elements and appending them to maincontainer
var elm = document.crea
浏览 9提问于2014-03-21得票数 3
回答已采纳
8回答
追加元素数组的jQuery
、、、、
对于这个问题，假设我们需要将1000个对象append()到body元素。
你可以这样做：
for(x = 0; x < 1000; x++) {
var element = $('<div>'+x+'</div>');
$('body').append(element);
}
这工作，但它似乎对我低效的AFAIK这将导致1000个文件回流。更好的解决方案是：
var elements = [];
for(x = 0; x < 1000; x++) {
var element = $(&
浏览 1提问于2012-08-24得票数 57
回答已采纳
3回答
我是一个新的蜜蜂在JQuery，我想使用在一个特定的网页由wordpress建立的陷阱的spyscroll功能。
所以我的想法是注射
data-spy="scroll" data-target="#myScrollspy" data-offset="20"
在我的页面的身体标签里
这将是
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
使用document.ready或onload函数
$("
浏览 4提问于2016-12-14得票数 0
回答已采纳
3回答
我有下面的HTML部分和相关的jQuery。html函数工作正常，但是data函数根本没有影响到HTML，在我的一生中，我根本找不到浏览器中的任何错误。
<span id="usernameStatus" data-valid="0">x</span>
jQuery
data是通过AJAX调用返回的，它只会是true或false。
function validUsername(data)
{
if (data === 'true') {
$("#usernameStatus
浏览 5提问于2016-05-17得票数 7
回答已采纳
例如：
$("myElement").click(function(){
alert("Clicked!");
};
#myElement是否已被修改，它的onclick属性是否已设置，或者jQuery是否刚刚设置了侦听器？
浏览 0提问于2011-09-09得票数 1
回答已采纳
我开发了一个客户端应用程序，不幸的是，我怀疑内存泄漏。
应用程序有很多私有的克隆对象，在每个函数的末尾，我通过将对象设置为null来释放对象。(foo = null;)
我的问题是，我该如何处理这些物品？
使用foo = null就足够了吗？
另外，有什么工具可以帮助我识别问题吗？
溶液
最后，我的问题是jquery进度条的错误使用造成的。
function updateProgressBar() {
if (!handle) //by adding this, the problem solved.
return;
j
浏览 5提问于2012-03-22得票数 3
1回答
内存较少(448MB)的浏览器发生内存泄漏。使用chrome调试器来确定原因，测试的图表如下图所示。已经确认在GC时JS堆、节点和EventHandler都被缩减了。节点和EventHandler的增加是否也会导致内存泄漏？ 不幸的是，我们不能分配更多的内存... ?
浏览 12提问于2020-11-27得票数 0
有了jQuery，我就可以使用$(sel).html(html)生成一个html区域。
没有jquery，我可以通过dom.innerHTML = html;做同样的事情。
我还发现$(sel).html()比dom.innerHTML慢，但是为什么呢？
$(sel).html和dom.innerHTML有什么不同
使用dom.innerHTML替代$(sel).html安全吗？
浏览 1提问于2012-12-27得票数 3
回答已采纳
我希望使用与JQuery相同的方法在Javascript中创建事件--有人知道JQuery是如何做到的吗？
我的推理是使用原始Javascript这样的：
var myEvent = new CustomEvent("userLogin", eventProperties);
...does实际上不能在Android原生浏览器上工作，因为它不像Chrome和其他浏览器那样支持DOM级别3。
然而，JQuery 在Android的股票浏览器上使用，并且简单地使用：
$.event.trigger('MyEvent');
我的问题是，这背后的代码是什么？我试图通过查
浏览 2提问于2014-08-01得票数 0
回答已采纳
在我的网页中，我每5秒更新一次无序列表$.get()的内容。问题是列表项的单击功能不起作用。列表项正在正常更新，但单击功能有问题
$(document).ready(function(){
$(".request").click(function(){
alert("hello");
//do some stuff
});
window.setInterval(function() {
浏览 0提问于2013-07-09得票数 1
回答已采纳
1回答
最近，我有机会建立一个新的网络应用程序，并考虑尝试角质，以获得一个很好的理解。所以是的，我对这个框架相当陌生。
在理解了框架的细微差别之后，我发现使用起来非常容易。我的经历一直都很棒，直到用户开始报告应用程序的完全滞后的性能。
这个应用程序相当简单--它有两个屏幕。一个显示交易列表，另一个用户可以添加/编辑交易信息--这第二个页面是一个简单的表单，期望用户输入与交易相关的信息。看起来是这样的：
概述的部分是使用ng-repeat呈现的。零售商名单上有大约530个条目，而品牌列表大约有400个条目。
经过一些分析之后，我发现访问第二个表单屏幕将继续增加浏览器的内存消耗。第一个屏幕没有任
浏览 2提问于2014-01-22得票数 7
我在一些代码中使用这个for循环。此代码将表中“左数组”中的所有元素附加到表中，并为它们分配一个唯一的rowID，它工作得非常好。
问题是：当“左”数组的长度为5000时，这个循环执行大约9秒；而当“左”数组的长度为10000和15000时，则分别需要27秒和54秒。我想这是一种模棱两可的行为，时间应该随着迭代次数的增加而线性增加。如果有人能告诉我这个问题的原因和解决办法，我会很高兴的。
提前谢谢。:)
$("body").append('<p id = "p1">table1</p>')
table = $('&
浏览 0提问于2017-01-19得票数 0
当使用Kendo UI小部件(例如Dropdownlist)时，有一些html代码附加到DOM的底部。为什么会这样呢？
查看演示站点：
问题:当使用AJAX重新加载某些内容时，这些html代码片段会再次被追加。因此，一些具有相同id的div被复制，这导致在使用jquery-id-selectors时出现一些错误。我能防止Kendo复制这些html片段吗？
浏览 2提问于2013-05-27得票数 3
回答已采纳
1回答
我有一个select元素。
此元素使用jquery进行循环，
任何为:selected的选项都会添加到一个列表(Lista)中
任何:not(':selected')选项都会添加到另一个列表中(listb)
这些列表遵循以下结构
<div id="lista">
<div>1st selected option text <div class="button"></div></div>
<div>2nd selected option text <div cla
浏览 0提问于2010-09-14得票数 0
回答已采纳
我正在用java脚本代码加载CSS文件。一开始，我使用jQuery代码。它工作得很好，但过了一段时间后，我意识到CSS规则不适用于IE浏览器。所以我谷歌了一下，把它换成了document.createElement版本。现在，它可以在所有浏览器中流畅地工作。有人知道为什么吗？这两种方法有区别吗？
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = filename;
c
浏览 0提问于2010-10-06得票数 5
回答已采纳
我创建了一个指令，检查数据是否以下列方式输入到HTML元素：
var myApp = angular.module('myApp', []);
myApp.directive("uiRequired", function () {
return function (scope, elem, attrs) {
elem.bind("blur", function () {
var $errorElm = $('#error_testReq');
$errorElm.empty();
浏览 6提问于2013-12-05得票数 0
回答已采纳
1回答
如果我将视图存储在window.myView变量中，则呈现它，然后调用javascript控制台：
$('#container').html('')
然后打电话：
$('#container').html(window.myView.$el)
绑定事件将停止工作。
我很确定这是应该的，但是：
为什么它是这样工作的？
如何重新呈现视图的子部分丢失事件绑定？
为什么调用myView.render()不会丢失事件绑定？
更新：
找到了文章。这就是原因吗？
当您不希望jQuery卸载您的事件时，请确保它不会卸载
如果您正在构建一个
浏览 3提问于2012-02-21得票数 14
回答已采纳
我了解并研究了多种绑定事件( .on()、.live()、.click()等)的方法，我知道.live()在1.9+中不受欢迎。我遇到的问题是将动态DOM元素绑定到事件。
我有一个包含链接和分页的div。这些链接使用AJAX动态加载。我想为这些链接覆盖绑定的事件，所以我使用了.unbind()并尝试了.on()。问题是这些动态加载的链接没有绑定。我想这是因为选择器$('#id_of_links')与前面的一组链接一起缓存。
问题：是否可以在任何时候绑定页面上加载的所有元素，而不必在用户单击链接上的下一页时设置回调？
浏览 3提问于2013-06-03得票数 6
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
