用 DHTML 做控制台的更好方法是什么？答案

【问题标题】：What is a better way to do a console with DHTML?用 DHTML 做控制台的更好方法是什么？
【发布时间】：2010-10-16 15:30:22
【问题描述】：

我想找到一种将控制台消息输出到 HTML 页面的更好方法。这种方法似乎很慢。

<html>
<title>Logging test</title>
<head>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

function log(s) {
    if(!log.start) {
        var date = new Date();
        log.count = 0;
        _log("0", "log() started at " + date);
        log.start = date.valueOf();
    }
    _log(new Date().valueOf() - log.start, s);
}

function _log(header, s) {
    var logMessages = document.getElementById("logMessages");
    if(!logMessages) {
        alert(logMessages);
        return;
    }
    var message = document.createElement("div");
    message.className = "logMessage";
    var content = "";
    content += "<span class=\"time\">" + header + "</span>";
    content += "<span class=\"line\">" + (log.count++) + "</span>";
    content += "<span class=\"level\">" + "" + "</span>";
    content += "<span class=\"msg\">" + s.replace(/ /g, "&nbsp;").replace(/\n/g, "<BR />") + "</span>";
    message.innerHTML = content;
    logMessages.appendChild(message);
    setTimeout(function(){message.scrollIntoView(true)},1);
}

function main(e) {
    if(window.confirm("Would you like to display logging?")) {
        for(var i=0;i<5000;i++) {
            log("Hello World " + i);
        }
    }
}
//-->
</SCRIPT>

<style>
.logMessage {
    border-bottom: 1px black solid;
    font-size: 8pt;
    font-family: Lucida Console;
}

.logMessage .line, .logMessage .time {
    width: 30px;
}

.logMessage .level {
    display: none;
}

.logMessage .msg {
}

#logMessages {
    overflow: auto;
}
</style>

</head>
<body onload="main()">
<div id="logMessages"></div>
</body>

</html>

【问题讨论】：

速度对我来说似乎很好，尽管滚动可能会导致一些问题，因为大量日志会很快发生。我看到的唯一问题是，在 FF 中，日志消息的呈现在大约 2300 之后死亡（之后只显示空白），尽管 IE 和 chrome 渲染它很好。

标签： javascript html dom

【解决方案1】：

Firebug 很好的是您正在使用 Firefox 来测试您的工作（假设您想要记录消息以进行调试）。如果您正在测试其他浏览器，您还可以使用Firebug Lite，它在其他浏览器中模仿 Firebug 的功能。这样您就不必重新发明轮子。

【讨论】：

【解决方案2】：

这里的用例是什么？对于调试，Firebug 的console.log 是我所能想象的。对于您的特定情况，如果您真的希望它进入页面并发现您当前的解决方案太慢，我肯定会用更有效的东西替换所有字符串连接（将字符串推入数组并将它们加入结尾，或者抽象出来的 StringBuffer），因为 Javascript 中的字符串操作是 some browsers 中的 infamously bad（我在看着你，雷德蒙德！）

【讨论】：

出于好奇，我修改了他的代码以使用数组方法。快 10 倍！（原始代码在 Chrome 中耗时 11 秒。数组方法耗时不到 2 秒）。
是的。让世界变得与众不同。