Htykuut

My goal is to show a log file in real time. I'm doing it through a websocket, but when the paragraph ('p') of the html starts to be big (450 lines), Chrome starts lagging and crashing.

The implementation is this:

var paragraph = document.getElementById('idLog');

stompClient.subscribe('/suscribers/tomcatlog', function (data) {

    var lineLog = JSON.parse(data.body);

    if (lineLog.line !== null) {

        paragraph.innerHTML += lineLog.line;

        paragraph.appendChild(document.createElement("br"));

        var elem = document.getElementById('main');

        elem.scrollTop = elem.scrollHeight;

    }

});

Why is this happening?

Doing string manipulations using += with ever growing strings is notoriously slow. Each time the entire string has to be copied into a new one, with the new characters appended.

On top of that the ever growing string has to be parsed over and over again - after all we are running in a browser.

Instead you should create a Text Node and append it directly to the parent element, like this:

if (lineLog.line !== null) {

    paragraph.appendChild(document.createTextNode(lineLog.line));

    paragraph.appendChild(document.createElement("br"));

    // ...

}