从DOM中清空一系列元素的最快方法是什么

Question

我的布局（简化）如下

<div class="row">
    <div class="row_section">
    <div class="row_section">
    ...
</div>
<div class="row">
    <div class="row_section">
    ...
</div>
...

我想找出一种最快的方法，在一定的时间间隔（比如从0到59）内清空所有具有class="row"的div

到目前为止，我已经尝试了很多选择：

$j('div.row').slice(nr_i, nr_s).empty();

令人惊讶的是，比耗时更长

for(i = nr_i; i < nr_s; i++) {
    $j('div.row:eq('+i+')').empty();
}

并且在仅在所选区间中存在.row_sectiondiv的示例中，

$j('div.row_section').remove();

是最快的，但仍然不够快。清空一个由60行组成的部分所需的时间是创建一个新部分所需时间的两倍，实际上几乎是3倍。

考虑到创建行需要更多的掌声，而不仅仅是添加一堆小节（小节中还有其他内容，每行有很多小节），我认为创建它们需要更长的时间。

做原始任务最快的方法是什么？为什么清空（使用最快的解决方案）比创建新任务要花更多的时间？

我还想补充一点，行元素可以达到数千个，但非空行永远不会超过60-80个，row_sections可以达到每行数百个。是的，我知道在网络应用程序中这样做是不切实际的，但唉，这是必须要做的。

Answer 1

var elements = document.getElementsByClassName("row");
for(i=0; i<elements.length; i++)
{
    elements[i].innerHTML = '';
}

Answer 2

根据jQuery代码，slice方法执行本机slice，然后调用jQuery.merge方法。merge方法对当前jQuery集合中的每个元素执行循环。

所以在第二个例子中，你只做了一个循环。在第一个示例中，您制作了一个切片，然后是用于合并的循环，然后是第二个循环，将empty方法应用于集合中的所有元素。

我认为最快的解决方案是使用navigator querySelectorAll方法（jQuery在使用标准CSS选择器时使用此方法）。试着构造一个像div.row:eq(1), div.row:eq(2), div.row:eq(3) ...这样的大CSS选择器，并使用它来实现这一点：$(selector).empty()；

Answer 3

为什么不试试：

function removeRow(fromV, toV){
  $('div.row').each(function(i){
    if(i >= fromV && <= toV){ 
      $(this).remove();
    }
  });
}

另一个尝试：

function removeRow(fromV, toV){
      var i = fromV;
      while(i <= toV){
          $('div.row').eq(i).remove();
          i++;
      }
    }

Answer 4

另一个不产生额外查询选择器解析的选项：

var divs = $j('div.row');
for(var i = nr_i; i < nr_s; i++) {
    divs.eq(i).empty();
}