为什么尾部长文件崩溃铬

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