2

私は現在、Web ベースの音楽プレーヤーの開発に取り組んでいます。私が抱えている問題は、データベースからすべての曲のリストを取得してクライアントに送信することです。クライアントにはプレイリストを動的に作成する機能があるため、ライブラリ全体のリストにアクセスできる必要があります。このライブラリには、20,000 曲以上のユニークな曲があります。私はdjangoとこの暫定的なスキームを使用してサーバー側でデータを準備しています:

{
  id: "1",
  cover: "http://example.com/AlbumArt.jpg",
  name: "Track Name",
  time: "3:15",
  album: "Album Name",
  disc: (1, 2),
  year: "1969",
  mp3: "http://example.com/Mp3Stream.mp3"
},

{
  id: "2",
  ...
}

この情報をクライアントに動的に送信する最良の方法は何ですか? JSON を使用する必要がありますか? JSON は 20,000 エントリで構成されるこのテキスト ファイルを効果的に送信できますか? このプレイリストをクライアント側にキャッシュして、データベースに変更があった場合にのみ、ユーザーがログインするたびにこの巨大なリクエストを発生させる必要はありませんか?

基本的に、この時点で必要なのは、それぞれが独自の属性 (名前、サイズなど) を持つ約 20,000 個のオブジェクトで構成されるテキストベースのプレイリストをタイムリーに送信する信頼できる方法です。Googleミュージックのようなものです。ログインすると、ライブラリ内のすべての曲が表示されます。彼らはこのリストをどのように送っていますか?

頭に浮かぶもう 1 つの小さな質問は、ブラウザ (主に Chrome) は、使いやすさを犠牲にすることなく、この量のデータを処理できるかということです。

ご協力ありがとうございました！

4

4 に答える 4

2

Google Play のネットワーク トラフィックを調べたところ、最初のライブラリ画面 (約 50 トラック) が JSON 経由で送信され、最低限のメタデータ (名前、トラック ID、アルバム アート ID) が送信されます。メイン ライブラリ ページをロードすると、インライン JS オブジェクトGist Sampleからアイテムを挿入するように見える非常に基本的な HTML ページにリクエストが送信されます。合計ファイルは約 6MB でしたが、キャッシュされており、何も転送する必要はありませんでした。

ページ分割された JSON リクエストを実行してデータをプルダウンし、ETag とキャッシュを使用して、絶対に必要でない限り再送信されないようにすることをお勧めします。通常の のページネーションの代わりに を?page=5&count=1000試してください?from=1&to=1000。995 を削除すると?from=1&to=1000キャッシュから消去されますが、そうではありません?from=1001&to=2000(一方、消去され?page=2&count=1000ます)。

Google Play ミュージックは、ローカル ストレージ、IndexedDB、または Web SQL を使用していないようで、キャッシュされたファイルからすべてをロードし、JS オブジェクトに解析します。

于 2013-06-22T05:03:20.477 に答える
0

json ファイルをラップして適切なチャンクを吐き出すファイルのようなオブジェクトを実装できます。

たとえば、json ファイルが音楽オブジェクトの単一の配列であることがわかっている場合、json ファイルをラップして配列のチャンクを返すジェネレータを作成できます。

json ファイルのチャンクを正しく取得するには、文字列コンテンツの解析を行う必要があります。

あなたのjsonコンテンツを生成するものはわかりません。可能であれば、1 つの巨大なファイルではなく、多数の管理可能なファイルを生成することを検討します。

于 2013-06-22T04:53:05.577 に答える
0

完全な JSON を 1 回のリクエストで送信する場合のパフォーマンスをテストします。JSON 要求の応答時間ではなく、UI のレンダリングが最も遅い部分である可能性があります。ページ上の JavaScript オブジェクトに JSON を保存し、スクロールに基づいて必要に応じて UI のみを動的にレンダリングすることをお勧めします。JavaScript オブジェクトは、クライアント側のスクロールのデータ ソースとして機能できます。JSON が大きすぎる場合は、サーバーによるスクロールを検討することをお勧めします。

このソリューションはブラウザに依存しません (HTML < 5 )

于 2013-06-22T04:53:19.863 に答える