Почему хвост длинный файл аварийного завершения 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

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

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

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

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