Question

我使用Chrome扩展程序删除特定UL中的li元素。

例如我有

<ul>
    <li id="1"><div class="l1"><p>test1</p></div></li>
    <li id="2"><div class="l1"><p>test2</p></div></li>
    <li id="3"><div class="l1"><p>test3</p></div></li>
    .... and so on
</ul>

我有3500个项目（如数据库）的数组，在每个页面上重新加载检查此ul匹配并删除它们。

我的jQuery代码是这样的：

var remove = function remove(items){ 
    $.each(items, function(index,value){ 
       if( $("div.l1 p").filter(function() { return $(this).text() == value; }).length ) // if there is match { 
          $("div.l1 p").filter(function(){ return $(this).text() == value; }).parent().parent().remove(); // delete li element
       }
   }
}

我称之为：

var initi = function initi() // called when page is loaded
{
    remove(Array("test1","test2","test3",...,"testonemilion"));
}

我发生的问题有时会随机耗尽内存并需要重新加载页面。我认为当“数据库”变得更大时，这种情况会更频繁发生。

所以我想问一下是否有可能的方法来优化我的jQuery函数，以降低内存压力？

我使用最新的chrome 40.0.2214.115 m并且我的电脑上有8GB内存（从未达到100％）

谢谢！

编辑：还有调试工具，它将显示不同版本的函数将如何执行（例如，function1（）执行1秒，function2（）执行0.8秒等等）

Answer 1

您可以使用filter()来查看文本是否在数组中，因此只能循环遍历元素一次，而不是像您一样循环多次

var remove = function remove(items){         
          $("div.l1 p").filter(function(){
              return $.inArray( $(this).text(), items) !==-1;
          }).parent().parent().remove();           

}

的 DEMO

Answer 2

您的代码可以更高效。由于filter()将返回包含匹配元素的对象，因此无需使用if语句。

您还应该将jQuery对象保存在变量中，以节省必须为.each()方法的每次迭代选择所有段落。

var remove = function remove(items){
    var $p = $("div.l1 p");
    $.each(items, function(index,value){
          $p.filter(function(){
              return $(this).text() == value;
          }).parent().parent().remove();
       }
   }
}

话虽如此，这对你来说不会更快; 3500+元素是通过任何度量循环的许多元素。分散你的结果。

Answer 3

您正在运行2个过滤器，然后访问父过滤器的两次过滤器。

你有可能做到：

<ul>
    <li id="1" class="test1"><div class="l1"><p>test1</p></div></li>
    <li id="2" class="test2"><div class="l1"><p>test2</p></div></li>
    <li id="3" class="test3"><div class="l1"><p>test3</p></div></li>
    .... and so on
</ul>

OR

<ul>
    <li id="1" data-text="test1"><div class="l1"><p>test1</p></div></li>
    <li id="2" data-text="test2"><div class="l1"><p>test2</p></div></li>
    <li id="3" data-text="test3"><div class="l1"><p>test3</p></div></li>
    .... and so on
</ul>

这样你可以在你想要删除的LI上使用简单的选择器吗？

var remove = function remove(items){ 
    $.each(items, function(index,value){
       $('.'+value).remove();
   });
}

优化javascript / jQuery以获得更好的性能

3 个答案: