使用javascript搜索2000多条xml记录会锁定浏览器

我的客户希望为他拥有的静态xml文件中的条目创建一个搜索表单，而不希望使用服务器端技术。他希望它只在浏览器中使用javascript。我所做的一切都很有效，只是如果你搜索的东西有很多匹配的条目，它会锁定浏览器一段时间。我怎样才能防止这种情况？以下是我所拥有的：

$(function(){
    var root, searchEvent = setTimeout(function(){}, 0);
    $.get('allitems.xml', function(xml){
        root = $(xml);
    });

    $('#search-field').on('keyup', function(e){
        clearTimeout(searchEvent);
        searchEvent = setTimeout($.proxy(function(){search($(this).val());}, this), 500);
    });

    function search(q){
        var results = 0;
        $('#searchResults').empty();

        root.find('Beskrivning').each(function(i, el){
            /*if(results > 9)
                return false;*/
            el = $(el);
            if(el.text().toLowerCase().indexOf(q) != -1){
                addToResults(el.parent());
                results++;
            }
        });
    }
    function addToResults(node){
        var div = $('<a>').attr(
                'href', 
                'http://www.pn-trading.se/Objekt/tabid/125/' +
                    (node.find('ID').text()) +
                    '/123055/auktion/' +
                    (node.find('paplatsnamn').text()) +
                    '/Default.aspx?tabselect=' +
                    (node.find('paplatsnamn').text())
            )
            .attr('target', '_blank')
            .addClass('sr-item')
            .append(
                $('<div>').addClass('sr-item-image').append(
                    $('<img>').attr(
                        'src', 
                        'http://www.pn-trading.se/Portals/0/' +
                            (node.find('katalog').text()) +
                            '/' + (node.find('bildnr').text()) + '-200.jpg'
                    )
                ),
                $('<div>').addClass('sr-item-details').append($('<div>').html(node.find('Beskrivning').text()))
            );
        $('#searchResults').append(div);
    }
});

它的基本工作原理是抓取并缓存xml文件，在一个keyup事件中搜索xml文件。关于提高性能有什么建议吗？我知道我可能需要至少2-3个字符才能搜索，甚至分页，但如果可能的话，我宁愿远离这些选项

---

此外，它还需要与所有标准浏览器配合使用，包括>=IE7

您可以进行增量搜索，使用计时器将其拆分。

---

这样，您的浏览器就不会冻结。

在文本框旁边添加一个搜索，并且只在单击该文本框时进行搜索，而不是在每次按键释放时进行搜索。

一件事是，您使用了大量的.find In a loop，这本身并没有那么好的性能。您可以编写一个小的jQuery插件来显著改进这一点

另一件事是，您可以动态地将xml转换为json，将其存储在局部变量中并进行搜索。在StudentLiteratur.se上阅读这一页，了解他们是如何处理相同问题的

您可以选择一个插件，该插件允许您指定哪些节点要包含在转换中，哪些节点不包含在转换中

---

然后，为了进一步优化它，您可以使用Modernizer来检测WebWorker支持并将作业传递给web worker。但只有在浏览器支持的情况下。

我只能通过在每次按键后重置一个计时器来解决这个问题，该计时器会将搜索延迟一段时间，比如说200-300毫秒。一旦用户停止键入片刻，搜索就会执行

这不是一个好主意，但网络工作者能帮上忙吗？应该指定，必须在没有插件的所有浏览器上工作，包括>=IE7您是否使用jQuery搜索XML？我建议您改用标准的DOMDocument，然后运行一些xpath或类似的东西。此外，为了使您的问题更有意义，请度量您的代码，并告诉在查找浏览器时循环运行的确切位置。我对xpath不太熟悉。如何使用它来搜索文本？您应该将条目放入一个排序数组，然后创建一个简单的索引，比如基于第一个字符。如果您需要更快的速度，请实现二进制搜索。这样，您可以在不到20次的查找中搜索1000000个条目，或者使用简单的第一个字符索引搜索多达26000000个条目。我已经完成了多达5000个条目，而且速度非常快，即使在IE6中也是如此。你能举个例子吗？这是一个gwt教程，但同样的逻辑也可以应用于javascript。您必须在xml的n个子集上进行n次搜索，并由计时器延迟。两次搜索之间的时间用于浏览器呈现UI，用户没有冻结的感觉。这是对调度程序的模拟不幸的是，JavaScript在JavaScript中不是多线程的。