問題タブ [documentfragment]

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

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

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

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

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

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

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

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

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

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

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

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

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

jsfiddleで私の例を参照してください。1 つの赤rectは静的マークダウンとして存在します。2 番目の緑rectは、appendメソッドを使用して追加されます。青はどこrect？rect青がすでに要素内に挿入されているドキュメント インスペクターで確認できますが、表示されsvgません。なんで？を使用してSVGに大量の長方形を挿入しようとしましdocumentFragmentたが、それらはすべて表示されません...

リフローを回避するために、DOM 要素を最初にドキュメントフラグメントに追加することをお勧めする場合があることを読みました ( https://developer.mozilla.org/de/docs/Web/API/Document/createDocumentFragment )。

SVG の操作 DOM ツリーに追加する前にすべての SVG 要素を追加する間に (パフォーマンス) 違いがあるかどうか疑問に思っています

1. ドキュメントフラグメント
2. SVG グループ要素 (まだ DOM ツリーに追加されていません)

多分誰かが手がかりを持っています。

新しく作成した要素を div に追加してから、その div をドキュメント フラグメントに追加しようとしていますが、期待どおりに動作しません。不足しているものを特定するのを手伝ってください。

私が理解していることから、すべてを a div に追加してから、div をフラグメントに追加できるはずです。コードを実行しても、DOM は何も変更されません。スコーピングが原因か、2番目のjsonリクエストが適切に設定されていない可能性があると思います

私の問題は非常に単純であると信じていましたが、検索に時間を費やした後、満足のいく解決策が見つかりません。

DocumentFragment 要素があり、HTML タグで完全にラップされているかどうかを確認したい。以下は、JavaScript に変換しようとしている疑似コードです。

DocumentFragment の場合:

関数はスパンオブジェクトを返す必要があります。

しかし、次のようなフラグメントの場合:

undefined を返す必要があります。

ページの読み込み中に表示したい css プリローダーがあります。これは目に見える。ただし、ページが読み込まれた後/ウィンドウ/ドキュメントの準備ができたら、これを削除したいと思います。これは私が苦労している部分です。

コンソールで次を取得しています。

不明な TypeError: null のプロパティ 'style' を読み取れません。script.js ファイルの 40 行目:preloader.style.opacity = 1;

関連するすべてのコードを含む JS Fiddle を添付しました。 https://jsfiddle.net/kultura/xpa4vz8e/

私はJavaScriptを学び始めているので、この特定の例について厳密にJavaScriptを使用して解決策を見つけたいと思います。

これまでのところ、タグの終わりの直前まで、スクリプトをさらに下に移動しました。ID「プリロード」を警告すると、コンソールもnullを返すため、呼び出しが行われたときに要素にアクセスできないことに関係があるかどうかはわかりませんgetElementById

あなたの助けと明確さをいただければ幸いです。みんなありがとう！