部分文字列を付加するとhtmlレンダリングが破損する

Question

ログファイルの内容をフロントエンドに送信するJavaサーブレットがあります。バックエンドはファイルをHTMLで区切り線タグ、タブを4つの改行しない空白などとしてHTMLで送信します。コンテナdivにすべてのテキストを一度に追加するだけでしたが、ファイルが大きく（〜100 MB）それはしばしばIEでクラッシュしました。

私は部分文字列としてデータを追加するためのループを書いており、パフォーマンスははるかに優れていました。しかし、部分文字列が最初の部分文字列がタグの一部を終端とし、残​​りの部分文字列がタグの残りの部分で始まるように部分文字列をテキスト内で分割すると、HTMLレンダリングがブレーク線などではなくリテラルテキストを壊して表示するようですループが完了した後にタグがレンダリングされるように、これを回避する方法やdivを再レンダリングする方法はありますか？

var i = 0; 
var j = 6000; 

$('#div_container').empty(); 

while(data.substring(i,j)) 
{ 
    // Append to the container 
    $('#div_container').append(data.substring(i,j)); 

    i += 6000; // Increment position 
    j += 6000; // Increment position 
} 

編集：

これが可能なの重複としてマークされていたが、私は、これは別の問題であると考えています。ここにはjsfiddleがあり、可能な重複した質問からの解決策の2つが問題を解決していません。

編集2：

私はHTMLタグが分割されていない確実にサーバー側のチャンキングとかなり簡単にこの問題を解決することができます。しかし、パフォーマンスに大きな影響を与えないフロントエンドソリューションを誰かが持っていれば、私はまだ不思議です。

Answer 1

あなたの質問から、あなたは<br>タグを使用していることを理解しています。

したがって、appendごとに、ブラウザはコンテナ内に有効なHTMLを生成しようとします。したがって、ちょうど<bでデータチャンクを終了すると、ブラウザはタグを作成するためにスキップし、 r>は既知のタグに解決できないため、テキストとして表示されます。だからあなたの唯一の解決策は、できるだけ長い間テキストとしてデータを扱い、プロセスの最後にHTMLに変換することだと思います。

次に、「目に見えない」HTMLノードにテキストを追加し、それをループして、「可視要素」に1行ずつ追加（コピー）することができます。

しかし、それはメモリにファイルの内容を保存するので、パフォーマンスに影響を与える可能性があります。