4
私は、特定のクラス名を持つ要素のinnerText内の特定の文字列を検索するために使用する関数を持っています。一致するものが見つかると、その要素には表示するブロックの表示が表示され、表示しない場合は非表示になります。私はこれを検索するために（私は同じクラスの約3千の要素を持っている）、完了する前に数秒（約5秒）かかる。このコードを書くためのパフォーマンスに基づいた方法がありますか？遅い文字列検索、どのように改善できますか？
function searchClass(ClassName, Value){
var c = document.getElementsByClassName(ClassName);
var val = Value.toLowerCase().trim();
for(var i=0;i<c.length;i++){
if(c[i].innerText.toLowerCase().trim().indexOf(val) > -1){
c[i].style.display = "block";
}else{
c[i].style.display = "none";
}
}
}
PS。この関数をトリガするkeyupイベントがあります。
編集：（解決策） innerTextをtextContentに変更するだけで、検索が即座に速くなります。
あなたはcssに何も表示しないように設定し、表示する必要があるものを表示するだけです（jsには表示なしを設定する必要はありません）、 'c [i] '。あなたがkeyupの代わりにcomplete型でこれを引き起こすことができれば、おそらく多くの助けになるだろう。ロード時に何も起こっていないとユーザーが思わないようにするには、ローディングスピナーを使用してください。 – Huangism
どのくらいの頻度でファンクションがトリガーされますか？ – KingCoder11
バニラJSを使用することは、すでに最適化されたパフォーマンスのための素晴らしいステップです。私が見る他の唯一のことは 'c [i]'をローカル変数に保存することができるということですが、それはおそらくパフォーマンスをあまり上げません。 – Connum