連絡先のリストを表示し、それらをフィルタリングできるようにするために、優れたアイソトーププラグインを使用することを計画しています。私が抱えている問題は、それが小さなデータセットに対してはうまく機能するということですが、1000以上のデータに対してそれをスケールアップする最良の方法がわかりません。
これまでのところ、私が持っていたアイデアは次のとおりです。
これらがうまくいくかどうかはわかりませんが、他の人がこの状況に直面し、私にいくつかのアイデアを与えることができることを望んでいました。
あなたが説明する状況はかなり一般的です：ユーザーが一度に詳細に見ることができるよりも多くのデータにアクセスできるようにする方法。
質問に答えるにはいくつかの方法があり、正解は完全に主観的です。それは、ユーザーが連絡先を何を見ようとしているのか、または何をしようとしているのかによって異なります。本当に満足のいく解決策を得る前に、ユーザーが連絡先を何に使用するのかを知る必要があります。
推測するだけで（しかし、あなたは私よりもよく知っているでしょう！）、彼らがしていることは2つあると思います。
すべてのソリューションに対してフィルタリングを行う場合、ルックアップの目標はほとんど問題になりません。探索の目標は、次の目的で設計することです。
私があなたの立場にあったら、連絡先のクラスタリングを紹介したいと思います。1000以上の連絡先がパフォーマンスの問題の多くであるとは思えないので（100万以上の話をしているとは言えません！）、10000以上は実際にはユーザーの制約です。つまり、一度に1000以上の連絡先を表示することはできません。
おそらくラストネームまたはラストネームとファーストネームでクラスタリングを導入することをお勧めします。次に、1つのクラスターにドリルダウンする方法をユーザーに提示しますが、他のすべての連絡先を折りたたんで、すぐに表示されないようにします。アコーディオン/ロロデックスパラダイムの連なりの何か。これにより、ユーザーは「すべての連絡先」を操作しているように見せることができます。おそらく、クラスターごとに最小数を導入して、クラスターが十分に小さい場合にわざわざ表示しないようにします（つまり、2、3、または5の連絡先のクラスターを表示する理由-連絡先を表示するだけです）。次にフィルターを適用すると、クラスターが溶けてしまいます。
多数の同位体アイテムを追加および配置するときにパフォーマンスの低下を経験していました。これは、アイテムをバッチではなく段階的に追加していたためです。それは当然の選択のはずですが、私が見落としていたものです。
個別にロードまたは削除するのではなく、要素の配列またはリストを必ず使用してください。
incomingData=['<div>a</div>','<div>b</div>'];
elements=[];
jQuery.each(incomingData,function(ind,val){
var element = jQuery(val).get(0);
//$container.isotope('insert', element); //resource heavy
elements.push(element);
});
$container.isotope( 'insert', elements ); //less processing
Read Through Cache のアイデアを採用すると、次のようになります。
ローディングエリアは単純に次のようになります。
<html>
<body>
<!-- the page stuff -->
<div id="loader" style='display:none'>
<!-- all elements are loaded here -->
<div class="item">...</div>
</div>
</body>
</html>
このようにして、すべての要素を段階的に DOM にロードし、必要なものだけを表示することができます。