하위 문자열을 추가하면 html 렌더링이 깨집니다.

Question

로그 파일의 내용을 프런트 엔드에 보내는 자바 서블릿이 있습니다. 백엔드는 줄 바꿈 태그, 줄 바꿈하지 않는 공백 4 개 등으로 줄 바꾸기를 포함한 html로 파일을 보냅니다. 전체 텍스트를 한 번에 컨테이너 div에 추가하려고했지만 파일 크기가 커서 (~ 100MB) 그것은 종종 IE에서 추락했습니다.

그래서 하위 문자열로 데이터를 추가하는 루프를 작성하여 성능이 훨씬 향상되었습니다. 그러나 부분 문자열이 첫 번째 부분 문자열이 태그의 일부를 끝내고 나머지 부분 문자열이 태그의 나머지 부분으로 시작하도록 텍스트의 태그를 분할하면 HTML 렌더링이 중단 줄 이외의 문자 그대로의 텍스트를 중단하고 표시하는 것처럼 보입니다. 루프가 완료된 후 태그가 렌더링되도록 div 또는 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 :

나는 HTML 태그가 분리되지 않습니다 보장 서버 측 청크로 비교적 쉽게이 문제를 해결할 수 있습니다. 그러나 성능에 큰 영향을 미치지 않는 프론트 엔드 솔루션을 가진 사람이 누구인지 궁금합니다.

Answer 1

귀하의 질문에 나는 <br> 태그를 사용하고 있음을 이해합니다.

따라서 append이 있으면 브라우저가 유효한 HTML을 컨테이너에 생성하려고 시도하므로 데이터 청크가 <b으로 끝나면 브라우저가 태그 생성을 건너 뛰고 새 데이터로 계속 추가됩니다 r>은 알려진 태그로 해석 할 수 없기 때문에 텍스트로 표시됩니다. 그래서 당신의 유일한 해결책은 가능한 한 오랫동안 텍스트로 데이터를 처리하고 프로세스의 마지막 단계에서 HTML로 변환하는 것입니다.

그런 다음 텍스트를 '보이지 않는'HTML 노드에 추가 한 다음이를 반복하여 '보이는 요소'에 한 줄씩 추가 (복사) 할 수 있습니다.

그러나 메모리에 파일의 내용을 저장하므로 성능에 영향을 줄 수 있습니다.