Question

我正在开发一个必须在客户端完全执行的在线词典，不能使用任何外部库，因此我将字典条目作为一系列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。）

Answer 1

也许通过缓存DOM元素，而不是在每次迭代中浏览DOM，这会更快。

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

Answer 2

除了htatche关于如何避免每次迭代都要经过DOM的评论之外，如果您所做的只是搜索一串字符串来查找子字符串的存在，那么使用indexOf()可能更好练习并可以为match()。¹

提供卓越的表现

JavaScript搜索功能在Chrome，Safari和Opera中运行良好，但在IE和Firefox中永远存在

2 个答案: