9

リストを構成する約100,000行を含むドロップダウンがあります。

<input id="search" type="text" />
<ul>
    <li>item 1</li>
    <li>item 2</li>
        ...
    <li>item 100,000</li>
</ul>

検索として機能するテキストボックスがあるので、入力すると、リスト内のアイテムへの入力と一致し、一致しないものが削除されます。これは、リスト要素の削除を実行するために作成したクラスです。

フィドルを参照してください（リストには約2000のアイテムがあります） 

// requires jQuery
var Search = (function(){

    var cls = function (name) {
        var self = this;

        self.elem = $('#' + name);
        self.list = $('#' + name).next('ul').children();
        self.elem.bind('keyup', function () { self.change(); }); 
    };

    cls.prototype = {
        change: function () {
            var self = this;
            // gets the closest ul list
            var typed = self.elem.val();

            // only do something if there is something typed
            if (typed !== '') {
                // remove irrelevent items from the list
                self.list.each(function () {
                    var item = $(this).html();
                    if (item.indexOf(typed) === -1)  {
                        $(this).addClass('zero');
                        // tried using a class with visibility hidden
                    } else {
                        $(this).removeClass('zero');
                    }
                });
            } else {
                // check what list items are 'hidden' and unhide them
                self.list.each(function () {
                    if ($(this).hasClass('zero')) {
                        $(this).removeClass('zero');
                    }
                });
            }
        }
    };
    return cls;
}());

高さ0を追加し、マージンやパディングなどを追加しないクラスを追加しているだけですが、visibility：hiddenを使用してみました。jQueryでdetachメソッドを使用してみましたが、速度の点ではほぼ同じです。

コードの問題を確認したり、最適化手法を提供したりできるJavaScriptの専門家はいますか？

4

2 に答える 2

3

人々が常に小さなサブセットのみを使用する場合、40k行を保持することは現実的な解決策ではありません。あなたができることはそれをキャッシュすることです。

  1. 最も使用されたものだけを保持します。
  2. 使用するほど、上部に表示されます。
  3. 使用したことがない場合は表示されません。そのような場合はajaxリクエストを起動します。
于 2012-12-19T02:20:06.183 に答える
3

これは、アイテムの数が多い場合でも、（とにかくデスクトップブラウザで）「比較的うまく」実行できますが、実際のパフォーマンスは他の要因によって異なります。

UIの応答性を維持するための「秘訣」は、「一度に多くの作業を行う」ことを介してsetTimeout、またはsetInterval「一度に多くの作業を行う」ことによって、時間の経過とともに検索/フィルタリングを処理することです。少なくともIE7/8では、サイドバーガジェットでそのようなものを使用した場合、20ms/30msの作業/残りがうまく機能することがわかりました。YMMV。

DOMを完全に検索することを回避できる場合（たとえば、キャッシュを使用して配列または他の検索可能な構造からオンザフライでnアイテムを再作成する場合）、これも報われる可能性があります-いくつかのベンチマークを実行してください！-そして検索をより簡単に保ちます。

もちろん、少なくとも「粗い結果」のためにサーバー側のソリューション（AJAXなど）を利用することも、ユースケースによってはより適切な場合があります。

于 2012-12-19T02:32:59.457 に答える