web-dev-qa-db-ja.com

Jqueryオートコンプリートのパフォーマンスを改善する方法

サイトでjqueryオートコンプリートを使用する予定で、テストバージョンを実装しました。 Imは現在、ajax呼び出しを使用して、すべての文字入力の新しい文字列リストを取得しています。問題は、新しいリストが作成される1.5秒前にかなり遅くなることです。オートコンプリートを高速にする最良の方法は何ですか?私はcakephpを使用して、検索を実行し、10個のアイテムを制限しています。

47
Björn

この記事 -どのように flickr がオートコンプリートを行うかについては非常に良い読み物です。私はそれを読んでいくつかの「すごい」経験をしました。

「このウィジェットは、JavaScriptですべての連絡先のリストを200ミリ秒未満でダウンロードします(10,000以上の連絡先を持つメンバーでも同じです)。このレベルのパフォーマンスを得るには、データの送信方法を完全に再考する必要がありましたサーバーをクライアントに。」

54
cllpse

その場でクエリを実行するのではなく、リストオブジェクトをプリロードしてみてください。

また、オートコンプリートにはデフォルトで300ミリ秒の遅延があります。
おそらく遅延を取り除いてください

$( ".selector" ).autocomplete({ delay: 0 });
38
Darren Cato

1.5秒間隔は、オートコンプリートサービスを提供するための非常に広いギャップです。

  1. まず、クエリとデータベース接続を最適化します。メモリ接続でデータベース接続を維持してみてください。
  2. サービスが再フェッチを無視するために頻繁に使用される場合は、結果キャッシュメソッドを使用します。
  3. クライアントキャッシュ(JSリスト)を使用して、古いリクエストをクライアントに保持します。ユーザーが入力し直して消去すると、便利になります。結果は、バックエンドポイントではなくフロントエンドキャッシュから取得されます。
  4. クライアント側の正規表現フィルタリングはコストがかかりません。チャンスを与えることができます。
11
Burcu Dogan

最適化を行う前に、まずボトルネックがどこにあるかを分析する必要があります。各ステップ(入力→要求→dbクエリ→応答→表示)にかかる時間を調べてください。たぶん、CakePHPの実装には、入力されたすべての文字に対してリクエストを送信しない遅延があります。

5
Gumbo

この場合の速度の本当の問題は、データベースでクエリを実行するのにかかる時間だと思います。クエリの速度を改善する方法がない場合、検索を拡張して、いくつかの高いランクの結果を持つアイテムを含めることができます.1文字おきに1つの検索を実行し、クライアント側で20-30の結果をフィルタリングできます。

これにより、パフォーマンスの外観が改善される場合がありますが、1.5秒で、最初にクエリ速度を改善しようとします。

それ以外に、さらに情報を提供していただければ、より具体的な答えをお伝えできるかもしれません。

幸運を!

4
Mike

PHP/SQLのサーバー側が遅い。

PHP/SQLを使用しないでください。私のオートコンプリートはC++で記述されており、ハッシュテーブルを使用して検索します。パフォーマンスを参照してください こちら

これはCeleron-300コンピューター、FreeBSD、Apache/FastCGIです。

そして、おわかりのように、巨大な辞書をすばやく実行します。 10,000,000レコードは問題ありません。

また、優先順位、動的翻訳、および別の機能をサポートします。

4
olegarch

オートコンプリート自体は遅くありませんが、実装は確かに遅くなります。最初に確認するのは、遅延オプションの値です(jQueryのドキュメントを参照)。次に、クエリを確認します。10個のレコードのみを戻す場合がありますが、これらの10個のレコードを取得するために大規模なテーブルスキャンを実行していますか?データベースから大量のレコードをコレクションに戻し、データベースでサーバー側のページングを行う代わりに、コレクションから10個のアイテムを取得していますか?簡単なインデックスが役立つ場合がありますが、確認するためにテストを行う必要があります。

1
Sean Chase