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"));
    // ...
}

为什么尾巴长文件会导致Chrome崩溃？

1 个答案: