JavaScript 搜索功能在 Chrome、Safari 和 Opera 中运行良好，但在 IE 和 Firefox 中需要很长时间答案

【问题标题】：JavaScript search function works great in Chrome, Safari, and Opera, but takes forever in IE and FirefoxJavaScript 搜索功能在 Chrome、Safari 和 Opera 中运行良好，但在 IE 和 Firefox 中需要很长时间
【发布时间】：2014-02-21 23:26:19
【问题描述】：

我正在开发一个必须完全在客户端执行并且不能使用任何外部库的在线词典，因此我将词典条目作为一系列 JavaScript 数组加载，然后将它们传递到网页.我使用了一个搜索函数，它遍历每个条目的索引并检查它是否与搜索字符串匹配，然后返回所有匹配的条目。（这实际上是通过使用 CSS 隐藏不匹配的条目来完成的，以避免每次搜索时必须在 HTML 中重新绘制多达 30,000 个条目。）

elen = Entries.length;
for (j=0;j<elen;j++) {
    shh_cypher = ShoshoniIndex[j]; //These search indexes are created from the JS array by an earlier function
    eng_cypher = EnglishIndex[j];

    //displays results and hides all other dictionary entries
    if(shh_cypher.match(search_term)) {
        document.getElementsByTagName("dt")[j].style.display = "";
    }
    else if(eng_cypher.match(search_term)) {
        document.getElementsByTagName("dt")[j].style.display = "";
    }
    else document.getElementsByTagName("dt")[j].style.display = "none";

    document.title = "Search is " + Math.round((j/elen)*100) + "% complete…";
}

在 Chrome、Opera 和 Safari 中的搜索有一点延迟，但这是可以接受的。在 IE 和 Firefox 中，第一次搜索需要很长时间才能返回任何结果，然后对任何后续搜索都很好（几乎没有延迟），但初始延迟使其无法使用。使用缩短版的数据库，一切正常，所以我知道这只是时间问题，而不是在那些浏览器中不起作用。

关于如何在 JavaScript 中更快地处理包含 30,000 个条目的数组的任何想法，或者关于为什么 Firefox 和 IE 会导致问题，而其他问题不会的想法？

这是页面：http://goo.gl/btBYOd （完全加载需要几秒钟，在 IE 中您必须允许 JavaScript。）

【问题讨论】：

htatche 和 Richard 的想法似乎都有帮助，但它仍然比我所接受的要慢。为什么 indexOf() 比 match() 工作得更快？

标签： javascript internet-explorer firefox search

【解决方案1】：

也许通过缓存你的 DOM 元素，而不是在每次迭代中遍历 DOM，这样会更快。

var dt_elements = document.getElementsByTagName("dt");
...
dt_elements[j].style.display = "";

【讨论】：

【解决方案2】：

除了 htatche 关于如何避免每次迭代都遍历 DOM 的评论之外，如果您所做的只是搜索一堆字符串以查找子字符串的存在，那么使用 indexOf() 可能是更好的做法，并且可能会提供优于match()的性能。¹

【讨论】：