无论如何减少这段代码的内存占用？

Question

我这里有一大段代码

//function that hides unwanted page elements based on a what is entered in  a search bar
function pageSearch() {
//when the function is called it retrieves what is entered in the search bar
//*****************variables*****************\
var userInput = document.getElementById("boxOfSearching").value;
var fields = [];
//an array of all article tags
fields = document.getElementById("bulletin-course-listings").getElementsByTagName("li");
var holder = "";
var counter = 0;
var childArray = [];
//*****************processing and output*****************\
    //while loop to sort through array elements
while (counter < fields.length)
{
     childArray = fields[counter].getElementsByTagName("strong");
     holder = childArray[0].innerHTML.toLowerCase();
     if (holder.indexOf(userInput) == -1)
     {
          fields[counter].setAttribute("style", "display:none");
     }
     else
     {
       fields[counter].setAttribute("style", "");
     }
     counter++;
}
}

现在，当我在 ID 为 boxofsearching 的文本框中键入内容（在 keyup 上调用此函数）时，应该发生（并且确实发生了）。它搜索元素列表并获取标签中的内容。然后它将它与用户输入的内容进行比较，如果不包含它则删除该元素。

但是，我在包含数百个元素的列表中使用它。当我键入时会发生什么，我的浏览器被锁定，内存使用和 CPU 使用高峰持续几秒钟，然后结束。有更有效的方法吗？

Answer 1

您是打算删除实际的 DOM 元素，还是只是通过 CSS 隐藏它们？如果您实际上并没有从 DOM 中删除它们，您可以检索一次 元素数组 ，如下所示：

var fields = array()

document.onload = function() {
    fields = document.getElementById("bulletin-course-listings").getElementsByTagName("li");
}

function pageSearch() { ... }

那你可以去掉函数中fields的定义。这应该会稍微提高性能。

Answer 2

嗯，你的字段应该是一个全局变量，最好是一个简单的 JS 对象而不是元素列表，比如

fields = [{"obj1"}, {"obj2"}];

每次 keyup 的 getElementsByTagName 可能会减慢它的速度。

无论如何减少这段代码的内存占用？

Anyway to reduce memory footprint of this code?

javascript

performance