1

私のクライアントは、自分が持っている静的 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 を含むすべての標準ブラウザで動作する必要があります。

4

4 に答える 4

0

Add a <button>search</button> next to the text box and only search when it has been clicked rather than on every key release.

于 2013-03-06T22:24:32.667 に答える
0

これを解決するには、キーを押すたびにタイマーをリセットして、特定の時間、たとえば 200 ～ 300 ミリ秒後に検索を遅らせることしかできませんでした。ユーザーが入力を一時停止すると、検索が実行されます。

于 2013-04-26T06:02:30.323 に答える
0

1 つのことは、ループ内で多くの .find() を使用していることです。これ自体はそれほどパフォーマンスが良くありません。それを劇的に改善するために、小さな jQuery プラグインを作成することができます。

http://jsperf.com/node-vs-double-select/3

もう 1 つは、その場で xml を json に変換し、それをローカル変数に格納して検索することです。ページを読み、studentlitteratur.se で同じ問題にどのように対処したかを調べてください。

http://www.thomasfrank.se/xml_to_json.html

変換に含めるノードと含めないノードを指定できるプラグインを選択できます。

次に、それをさらに最適化するために、Modernizr を使用して WebWorker サポートを検出し、ジョブを Web Worker に渡すことができます。ただし、ブラウザがサポートしている場合のみ。

于 2013-03-07T05:51:35.680 に答える
0

タイマーで分割して、「インクリメンタル」検索を実行できます。このようにして、ブラウザはフリーズしません。

于 2013-03-06T22:00:24.850 に答える