0

チャット アプリケーションをコーディングしていますが、配信確認やメッセージ キャッシングなどの機能が必要なため、少し複雑になっています。

現在、メッセージキャッシングを処理している方法は次のとおりです。

  1. ユーザーが会話をクリック

  2. サーバーからフェッチされたメッセージの最初のバッチは、配列内の「チャンク」に格納されます。

  3. 各チャンクは、n個のメッセージ (DOM 要素) が追加されたドキュメント フラグメントです。
  4. ユーザーが上にスクロールすると、サーバーからフェッチされるチャンク (フラグメント) が配列に追加されます。
  5. ユーザーが別の会話に移動した後、以前に読み込まれた会話を読み込むことにした場合、スクリプトはすべてのフラグメントを 1 つのフラグメントに追加し、大きなフラグメントをメッセージ ウィンドウに追加します。

これは、ユーザーがすでに大量のメッセージを取得している場合、メッセージの「チャンク」を含む配列がどのように見えるかです。

conversation[2].chunks = [
    #document-fragment,
    #document-fragment,
    #document-fragment
];

各フラグメントには、内部に約 10 個のメッセージが追加されています。

フラグメントを使用する前は、各メッセージの HTML 表現を取得することで文字列を使用していました。このようなもの：

conversation[2].chunks = [
    '<span class="msg">Hey</span><span class="msg">Hey</span>...',
    '<span class="msg">Bla</span><span class="msg">bla</span>...'
];

innerHTML を使用して文字列を解析し、要素を操作するよりも、(fragment.getElementById などを実行することにより) 各メッセージを操作する方が簡単であることがわかったため、フラグメントを使用することにしました。

ただし、フラグメントを配列内に保持することが実際にメモリを大量に消費するのか、少なくとも文字列よりもメモリを消費するのかがわからないため、それが正しい選択であったかどうか疑問に思っています。もう 1 つの欠点は、フラグメントを に保存する場合、localStorage各フラグメントのコンテンツを HTML 文字列にlocalStorage変換する必要があり、フラグメント システムと一緒に使用する場合は、各 HTML 文字列を変換する必要があることです。ドキュメントフラグメントに戻ります。

フラグメントを使用する方がより自然に思えましたが、今は HTML 文字列を保持することに戻ることを考えています。ただし、古いコードはもうないので、少し手間がかかります。

この場合、HTML 文字列よりもフラグメントを使用する利点はありますか?

ありがとうございました。

4

1 に答える 1

0
  1. メッセージのバッチを HTML 文字列のチャンクとして保存する方が、ドキュメント フラグメントのチャンクを保存するよりも高速ですが ( jsperfを参照)、
  2. メッセージを表示するためにドキュメント フラグメントのチャンクを読み取る方が、表示するために HTML 文字列を読み取る (および解析する) よりもはるかに高速です ( jsperfを参照) 。

次のことが提案できます。

サーバーから受信したメッセージを高速にキャッシュするには、メッセージを HTML 文字列としてキャッシュする必要があります。

メッセージがキャッシュされた後にメッセージをより高速に表示するには、メッセージをドキュメント フラグメントとしてキャッシュする必要があります。

于 2015-09-05T18:33:14.943 に答える