Почему хвост длинный файл аварийного завершения Chrome?

Question

Моя цель - показать файл журнала в реальном времени.Я делаю это через веб-сокет, но когда абзац ('p') HTML-кода начинает становиться большим (450 строк), Chrome начинает отставать и падать.

Реализация такая:

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;
    }
});

Почему это происходит?

Answer 1

Выполнение манипуляций со строками с использованием += с постоянно растущими струнами общеизвестно медленно.Каждый раз, когда вся строка должна быть скопирована в новую, с добавлением новых символов.

Кроме того, постоянно растущая строка должна анализироваться снова и снова - после всего того, что мы запускаем вbrowser.

Вместо этого вы должны создать текстовый узел и добавить его непосредственно к родительскому элементу, например:

if (lineLog.line !== null) {
    paragraph.appendChild(document.createTextNode(lineLog.line));
    paragraph.appendChild(document.createElement("br"));
    // ...
}