3

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

为什么会这样？

4

1 回答 1

1

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

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

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

if (lineLog.line !== null) {
    paragraph.appendChild(document.createTextNode(lineLog.line));
    paragraph.appendChild(document.createElement("br"));
    // ...
}
于 2018-11-21T09:58:49.717 回答