javascript - 为什么 tail 长文件会导致 chrome 崩溃？

Question

我的目标是实时显示日志文件。我正在通过 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;
    }
});

为什么会这样？

Answer 1

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

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

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

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