JavaScript搜索功能在Chrome，Safari和Opera中效果很好，但在IE和Firefox中永遠佔用

我正在研究必須完全在客戶端執行且不能使用任何外部庫的在線字典，因此我將字典條目加載爲一系列JavaScript數組，然後將它們傳遞給網頁。我使用搜索函數遍歷每個條目的索引，並檢查它是否與搜索字符串匹配，然後返回所有匹配的條目。（這實際上是通過隱藏與CSS不匹配項進行，以避免不必了重新繪製到30000項在HTML與每個搜索。）JavaScript搜索功能在Chrome，Safari和Opera中效果很好，但在IE和Firefox中永遠佔用

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的。）

來源

2014-02-21 gwistix

htatche和Richard的想法似乎都有所幫助，但仍然比我感到舒服。爲什麼indexOf（）比match（）工作更快？ – gwistix

也許通過緩存DOM元素，而不是通過DOM會在每一次迭代中，這將會更快。

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

來源

2014-02-21 23:28:42 htatche

除了htatche的評論，你應該如何避免通過DOM會每次迭代，如果你正在做的是通過一串字符串搜索找到一個子的存在，使用indexOf()可能是更好練習，並可能爲match()提供卓越的性能。 ¹

來源

2014-02-21 23:49:56

好想法！ – htatche

JavaScript搜索功能在Chrome，Safari和Opera中效果很好，但在IE和Firefox中永遠佔用

回答

相關問題