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

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"));
}

我遇到的问题有时是 chrome 内存随机耗尽，需要重新加载页面。我认为当 "database" 变大时，这种情况会更频繁地发生。

所以我想问问有没有可能优化我的 jQuery 功能的方法，以降低内存压力？

我使用最新的 chrome 40.0.2214.115 m 并且我的计算机上有 8GB 内存（永远不会达到 100%）

谢谢！

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

Answer 1

您的代码可以变得更有效率。由于 filter() 将 return 具有匹配元素的对象，因此不需要您的 if 语句。

您还应该将您的 jQuery 对象保存在一个变量中，以避免在 .each() 方法的每次迭代中 select 所有段落。

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 2

您是运行 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>

或

<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();
   });
}

Answer 3

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

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

}

DEMO

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

Optimize javascript/jQuery for better performance

javascript

jquery

google-chrome

out-of-memory