blocks|key|2637629|text|我假设你在IE上的表现很差。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2637630|我要说这是因为$.empty方法在一个循环中为表中每个删除的元素调用removeChild，而该方法在IE中的性能总是很差-参见this+article+for+short+case+study的一些性能比较和解决方案。|offset|length|style|CODE|2637631|无论你用大的DOM做什么，你的在IE上都会有很差的性能。This+article+on+appendChild+in+large+DOM+on+IE就是一个例子，说明社区仍然对这个简单的事实感到困惑。:)|BOLD|2637632|entityMap|0|LINK|mutability|MUTABLE|url|https://medium.com/@cnizzardini/poor-appendchild-and-removechild-performance-on-internet-explorer-a0f5ace34532|1|https://nulogy.com/who-we-are/company-blog/articles/appendchild-locking-up-ie-youve-got-too-much-html/^0|0|7|7|Y|B|1S|X|0|0|F|2F|S|1A|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]|$D|Y|E|Z|F|G]]|9|@$D|10|E|11|1|12]]|A|$]]|$1|H|3|I|5|6|7|13|8|@$D|14|E|15|F|J]]|9|@$D|16|E|17|1|18]]|A|$]]|$1|K|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]|S|$5|N|O|P|A|$Q|T]]]]

I'm assuming you have bad performance on IE.

I'd say that's because the <code>$.empty</code> method calls <code>removeChild</code> in a loop for every removed element in the table and that method always had bad performance in IE - see <a href="https://medium.com/@cnizzardini/poor-appendchild-and-removechild-performance-on-internet-explorer-a0f5ace34532" rel="nofollow noreferrer">this article for short case study</a> with some performance comparisons and resolutions.

No matter what you do with large DOM you will have bad performance on IE. <a href="https://nulogy.com/who-we-are/company-blog/articles/appendchild-locking-up-ie-youve-got-too-much-html/" rel="nofollow noreferrer">This article on appendChild in large DOM on IE</a> is an example of how the community is still befuddled by this simple fact. :)

blocks|key|2849213|text|您可以使用hide()和show()，而不是遍历整个DOM、移除并重新呈现。这是因为检索隐藏列也非常容易，所以速度快且性能好。请找到有用的代码片段。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2849214|​|2849215|//did+based+on+checkbox+here+update+to+ur+requirement+hide()+callback+remains+same.

$("input:checkbox:not(:checked)").each(function()+{
++++var+column+=+"table+."+%2B+$(this).attr("name");
++++$(column).hide();
});

$("input:checkbox").click(function(){
++++var+column+=+"table+."+%2B+$(this).attr("name");
++++$(column).toggle();
});|code-block|syntax|javascript|2849216|td,+th+{
++++padding:+6px;
++++border:+1px+solid+black;
}

th+{
++++background-color:+#f0eae2;
++++font-weight:+bold;
}

table+{
++++border:+1px+solid+black;
}|2849217|<head>
<script+src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<input+type="checkbox"+name="first_name"+checked="checked">+First+Name+
++<input+type="checkbox"+name="last_name">+Last+Name+
++<input+type="checkbox"+name="email"+checked="checked">+Email

<table+id="report">
<thead>
<tr>
+<th+class="first_name">First+Name</th>
+<th+class="last_name">Last+Name</th>
+<th+class="email">Email</th>
</tr>
</thead>
<tbody>
<tr>
+<td+class="first_name">Larry</td>
+<td+class="last_name">Hughes</td>
+<td+class="email">larry@gmail.com</td>
</tr>
<tr>
+<td+class="first_name">Mike</td>
+<td+class="last_name">Tyson</td>
+<td+class="email">mike@gmail.com</td>
</tr>
</tbody>|2849218|2849219|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

Instead of looping though entire DOM remove and re-render again you can use hide() and show(). Which is fast and good for performance since retrieving the hidden column is also very easy. Please find the snipet useful.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//did based on checkbox here update to ur requirement hide() callback remains same.

$("input:checkbox:not(:checked)").each(function() {
 var column = "table ." + $(this).attr("name");
 $(column).hide();
});

$("input:checkbox").click(function(){
 var column = "table ." + $(this).attr("name");
 $(column).toggle();
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>td, th {
 padding: 6px;
 border: 1px solid black;
}

th {
 background-color: #f0eae2;
 font-weight: bold;
}

table {
 border: 1px solid black;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;p&gt;&lt;input type="checkbox" name="first_name" checked="checked"&gt; First Name 
 &lt;input type="checkbox" name="last_name"&gt; Last Name 
 &lt;input type="checkbox" name="email" checked="checked"&gt; Email&lt;/p&gt;

&lt;table id="report"&gt;
&lt;thead&gt;
&lt;tr&gt;
 &lt;th class="first_name"&gt;First Name&lt;/th&gt;
 &lt;th class="last_name"&gt;Last Name&lt;/th&gt;
 &lt;th class="email"&gt;Email&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
 &lt;td class="first_name"&gt;Larry&lt;/td&gt;
 &lt;td class="last_name"&gt;Hughes&lt;/td&gt;
 &lt;td class="email"&gt;larry@gmail.com&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
 &lt;td class="first_name"&gt;Mike&lt;/td&gt;
 &lt;td class="last_name"&gt;Tyson&lt;/td&gt;
 &lt;td class="email"&gt;mike@gmail.com&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;</code></pre>
</div>
</div>

blocks|key|103612|text|你可以通过赋予表格内部的空行的值来清除表格，它不会遍历每一个行元素来查找标题，正文或者行来删除it.Hence会比你现在的方法更快。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|103613|$("#yourtableid").html("")；|103614|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

You can clear the table by assigning its inner HTML the value of the empty string.Then it will not go through each of the row element to find header,tbody or row to delete it.Hence would be quicker than your current approach.

$("#yourtableid").html("");

blocks|key|100696|text|如果你问为什么清空表比追加表多花1000倍的时间，那么，答案是不应该的:这是一个bug。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|100697|你可以发现重要的性能差异取决于浏览器，它的版本，jQuery的版本或操作系统，但25s对23ms太多了。它看起来比你遇到O(N%5E2)操作的地方要好。低于这个价格，人们就会开票，浏览器的开发者也会承认他们的存在。|offset|length|style|CODE|100698|无论如何，删除元素并不总是比添加元素更快。我们的直觉告诉我们，销毁应该比创建更快，但当涉及到操作DOM时，这不一定是正确的。jQuery和浏览器都需要做额外的工作来取出元素。|100699|如果您查看一下当前(3.2.1)的jQuery+append()+function实现，您会发现它基本上所做的就是使用原生JS方法appendChild()。另一方面，jQuery+empty()+function+(html()使用empty())需要遍历所有内部元素，并注意移除每个内部元素的相关数据(例如事件)，以防止内存泄漏。|100700|而且，如果你只使用普通的JS，浏览器在删除元素时仍然需要检查一大堆东西。如果你想了解浏览器的内部结构，你可以查看这个Firefox+issue。|100701|不管你用的是removeChild()、innerHtml还是textContent()，浏览器总是需要重新计算样式和布局:检查this+one+in+Chromium。|100702|这种bug是很常见的。如果你在Chromium中搜索关键字"removeChild“和"slow”来查找问题，你会得到一个漂亮的long+list。有时，它们由于引入回归的修复而来来去去，就像在涉及浮动元素的this+case中一样。This+other+one对你来说可能特别有趣，因为它证明了一些bug与你选择的删除元素的方法无关，而且就像你的例子一样，当复杂的CSS规则应用于这些元素时，它就会出现(建议浏览器触发回流)。|100703|我无法在Firefox和Chrome中重现你的问题，所以我无法解决25秒或1.5分钟的确切原因，但它似乎真的是在最近的版本中修复了一个错误。如果您仍然拥有相同的旧版本并可以重现它，那么检查一下以相反的顺序删除元素(从lastChild开始)是否有帮助。也许您会避免在移除后重新计算所有浮动同级的位置。|100704|下一次，也许你想打开一张罚单，看看他们是如何找到错误并修复它的。它会满足你的好奇心，并且你可以学到很多关于浏览器内部的知识！|100705|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jquery/jquery/blob/3.2.1/src/manipulation.js#L341|1|https://github.com/jquery/jquery/blob/731c501155ef139f53029c0e58409b80f0af3a0c/src/manipulation.js#L375|2|https://bugzilla.mozilla.org/show_bug.cgi?id=1285874|3|https://bugs.chromium.org/p/chromium/issues/detail?id=357087|4|https://bugs.chromium.org/p/chromium/issues/list?can=1&q=removeChild%2Bslow&colspec=ID%2BPri%2BM%2BStars%2BReleaseBlock%2BComponent%2BStatus%2BOwner%2BSummary%2BOS%2BModified&x=m&y=releaseblock&cells=ids|5|https://bugs.chromium.org/p/chromium/issues/detail?id=537111|6|https://bugs.chromium.org/p/chromium/issues/detail?id=499349^0|0|1O|6|0|0|O|8|1T|D|2J|7|31|6|39|7|H|O|0|2C|N|1|0|1M|D|2|0|6|D|K|9|V|D|1S|K|3|0|1S|9|4|2W|9|5|39|E|6|0|30|9|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1G|8|@$D|1H|E|1I|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1J|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1K|8|@$D|1L|E|1M|F|G]|$D|1N|E|1O|F|G]|$D|1P|E|1Q|F|G]|$D|1R|E|1S|F|G]|$D|1T|E|1U|F|G]]|9|@$D|1V|E|1W|1|1X]|$D|1Y|E|1Z|1|20]]|A|$]]|$1|L|3|M|5|6|7|21|8|@]|9|@$D|22|E|23|1|24]]|A|$]]|$1|N|3|O|5|6|7|25|8|@$D|26|E|27|F|G]|$D|28|E|29|F|G]|$D|2A|E|2B|F|G]]|9|@$D|2C|E|2D|1|2E]]|A|$]]|$1|P|3|Q|5|6|7|2F|8|@]|9|@$D|2G|E|2H|1|2I]|$D|2J|E|2K|1|2L]|$D|2M|E|2N|1|2O]]|A|$]]|$1|R|3|S|5|6|7|2P|8|@$D|2Q|E|2R|F|G]]|9|@]|A|$]]|$1|T|3|U|5|6|7|2S|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|2T|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]|13|$5|Y|Z|10|A|$11|14]]|15|$5|Y|Z|10|A|$11|16]]|17|$5|Y|Z|10|A|$11|18]]|19|$5|Y|Z|10|A|$11|1A]]|1B|$5|Y|Z|10|A|$11|1C]]|1D|$5|Y|Z|10|A|$11|1E]]]]

If you ask why emptying the table should take 1000 times longer than appending it, well, it just shouldn't: that is a bug. 

You can find important performance differences depending on the browser, its version, the version of jQuery or the OS, but 25s vs 23ms is way too much. It seems than somewhere you hit a <code>O(N^2)</code> operation. For less than that people open tickets and the browser's developers acknowledge them.

Anyway, removing elements its not always faster that adding them. Our intuition says that destroy should be faster than create but that's not necessarily true when it comes to manipulate the DOM. Both jQuery and the browser need to make additional work to take elements out.

If you have a look to the current (3.2.1) implementation of <a href="https://github.com/jquery/jquery/blob/3.2.1/src/manipulation.js#L341" rel="nofollow noreferrer">jQuery <code>append()</code> function</a> you will see that what it basically does is to use the native JS method <code>appendChild()</code>. On the other hand <a href="https://github.com/jquery/jquery/blob/731c501155ef139f53029c0e58409b80f0af3a0c/src/manipulation.js#L375" rel="nofollow noreferrer">jQuery <code>empty()</code> function</a> (<code>html()</code> uses <code>empty()</code>) needs to loop over all the inner elements and take care of removing the related data (e.g. events) to each of the inner elements to prevent memory leaks.

And, if you use just vanilla JS, the browser still needs to check a big bunch of things when removing elements. If you want to get into the browser's internals you can check this <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1285874" rel="nofollow noreferrer">Firefox issue</a>.

It doesn't matter if you go for <code>removeChild()</code>, <code>innerHtml</code> or <code>textContent()</code>, the browser always need to recalculate styles and layout: check <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=357087" rel="nofollow noreferrer">this one in Chromium</a>.

This kind of bugs are common. If you search into the Chromium for issues with the keywords "removeChild" and "slow" you get a pretty <a href="https://bugs.chromium.org/p/chromium/issues/list?can=1&amp;q=removeChild+slow&amp;colspec=ID+Pri+M+Stars+ReleaseBlock+Component+Status+Owner+Summary+OS+Modified&amp;x=m&amp;y=releaseblock&amp;cells=ids" rel="nofollow noreferrer">long list</a>. Sometimes they come and go due to fixes introducing regressions, like in <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=537111" rel="nofollow noreferrer">this case</a> involving floating elements. <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=499349" rel="nofollow noreferrer">This other one</a> can be specially interesting for you, because it proofs that some bugs are not connected with the method you choose to remove the elements and because, like in your case, it shows up when complex CSS rules are applied to that elements (suggesting than the browser triggered a reflow).

I was unable to reproduce your issue neither in Firefox nor in Chrome, so I can't address the exact reason for the 25 seconds or 1.5 minutes, but it really seems to a bug fixed in more recent versions. If you still have the same old version and can reproduce it, it could be worth to check if removing the elements in inverse order (starting from <code>lastChild</code>) helps. Perhaps you avoid recalculating the position of all the floating siblings after the one you remove.

Next time maybe you want to open a ticket and follow how they find the bug and fix it. It will satisfy your curiosity and you can learn a lot about browser internals!

blocks|key|103642|text|你只是想知道为什么。但也许其他人想知道一种加快速度的方法...因此，我只想指出我遇到的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|103643|我在删除之前动态创建的元素时遇到了问题(它是svg动画的一部分……某种程度上)。我的解决方案是将以前创建的元素存储在一个数组中。稍后，为了删除它们，我只需遍历数组来删除它们。这要快得多，并为我做了这个把戏。最后，对于我的情况，不是.remove()+(或.removeChild())函数本身的性能，而是对指定元素的DOM扫描(如Davids回答中所述)减慢了过程。|103644|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

You just wanted to know why. But maybe someone else wants to know a way for speedings things up... Therefore I just want to point out what i encountered.
I had an issue with removing elements fast enough which I created dynamically before (was part of an svg animation... kind of).
My solution was to store the elemens which have been created before in an array. Later for the removal I just had to iterate through the array to delete them. that was much faster, and did the trick for me.
In the end for my case it was not the performance of the .remove() (or .removeChild()) function itself but the DOM scanning for the designated elements (as mentioned in Davids answer) which slowed down the process.

I have a table with a lot of rows (like 10.000). 
(Note: I realize it doesn't make sense to have a table that large, but I'd like to understand the below behavior). 
When I receive new data I want to clear the rows first. Weirdly enough, clearing the table takes much longer than building the rows from scratch. Clearing the table rows with <code>html("")</code> or plain JS <code>innerHTML = ""</code> takes 1.5 minutes, much more than building the rows themselves, which takes less than a second. 

So my question: 
- Why does removing elements take more time than adding them? What happens 'behind the scenes'? 
(Please note my question is a Why one, I'm not looking for possible workarounds). 

UPDATE:

I noticed that the table row and cells have floating definitions applied to them, and when I remove the float, the table is emptied out in an instance. 
I'd still really like to understand why the float makes the removal of the rows so much slower. 
Here a fiddle: <a href="https://jsfiddle.net/maaikeb/t5pduuue/" rel="nofollow noreferrer">https://jsfiddle.net/maaikeb/t5pduuue/</a> 
In Chrome it takes 25 seconds to empty the table, and only 23 ms to append it to the DOM.

*I read the below posts, but they talk more about possible solutions, and less about why removing elements takes more time than adding them, what actually happens when you remove them 

<a href="https://stackoverflow.com/questions/7537070/jquery-empty-is-very-slow">jQuery empty is very slow</a> 
<a href="https://forum.jquery.com/topic/jquery-empty-is-very-slow" rel="nofollow noreferrer">jQuery empty is very slow</a> 
<a href="https://stackoverflow.com/questions/170997/what-is-the-best-way-to-remove-a-table-row-with-jquery">What is the best way to remove a table row with jQuery?</a> 
<a href="https://stackoverflow.com/questions/16258658/deleting-table-rows-in-javascript">Deleting table rows in javascript</a> 
<a href="https://stackoverflow.com/questions/723112/jquery-fastest-way-to-remove-all-rows-from-a-very-large-table">jquery - fastest way to remove all rows from a very large table</a>

Why does removing elements take more time than adding elements?

jQuery

我有一个有很多行的表(比如10.000行)。(注意:我知道拥有这么大的表是没有意义的，但我想了解一下下面的行为)。当我收到新数据时，我想先清除行。奇怪的是，清空表格所需的时间比从头构建行要长得多。使用html("")或普通的JS innerHTML = ""清除表行需要1.5分钟，比构建行本身需要不到一秒的时间要多得多...

问为什么删除元素要比添加元素花费更多的时间？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么删除元素要比添加元素花费更多的时间？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么删除元素要比添加元素花费更多的时间？
EN