为什么tail long file crash chrome？答案

【问题标题】：Why tail long file crash chrome?为什么tail long file crash chrome？
【发布时间】：2018-11-21 09:31:29
【问题描述】：

我的目标是实时显示日志文件。我是通过 websocket 做的，但是当 html 的段落 ('p') 开始变大（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;
    }
});

为什么会这样？

【问题讨论】：

我不完全确定问题的确切原因，但为什么不直接写一行，将其放入 DOM 元素并将其附加到其他列表中，而不是 +=这是一项繁重的操作。

标签： javascript html tail apache-tailer

【解决方案1】：

使用+= 对不断增长的字符串进行字符串操作非常缓慢。每次都必须将整个字符串复制到一个新字符串中，并附加新字符。

除此之外，必须一遍又一遍地解析不断增长的字符串 - 毕竟我们是在浏览器中运行的。

相反，您应该创建一个文本节点并将其直接附加到父元素，如下所示：

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

【讨论】：

我已经改变了实现它的方式，正如你所说的，它似乎工作正常。大约 15,000 条日志行正确编写并且在浏览器中没有滞后。非常感谢您的帮助。