Appending substring breaks html rendering

Question

I have a Java servlet that is sending the contents of a log file to the front-end. The back-end sends the file in html with newlines as break line tags, tabs as 4 nonbreaking spaces, etc. I tried simply appending the full text all at once to a container div but since the file can be large (~100 MB) it often crashed in IE.

So I wrote a loop to append the data as substrings and the performance was much better. However if the substring splits a tag in the text such that the first substring ends part of the tag and the subsequent substring begins with remaining part of the tag, the HTML rendering seems to break and display the literal text rather than the break line, etc. Is there a way around this or a way to re-render the div so that the tags are rendered after the loop is complete?

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
}

Edit:

This was marked as a possible duplicate but I believe this is a separate issue. Here is a jsfiddle where two of the solutions from the possible duplicate question do not fix the issue.

Edit 2:

I can solve this fairly easily with server side chunking that ensures HTML tags are not split. However, I'm still curious if anyone has a front-end solution that doesn't drastically impact performance.

Answer 1

From your question I understand that you are using <br> tags.

So, with every append the browser tries to generate a valid HTML in the container, so if it happens you end the data chunk with just <b the browser will skip to create tag, then it will continue with new data and add r> as text because it can't resolve it to any known tag. So I think your only solution is to treat the data as text for as long as possible and convert it to HTML at the very end of your process.

You could then append the text to an 'invisible' HTML node and then loop through it and append (copy) line by line to a 'visible element'.

However that meens storing the content of your file in memory, so it can affect the perfomance anyway.