Quelle est la meilleure façon de faire une console avec DHTML?

Je voudrais trouver un meilleur moyen de produire des messages de la console à une page HTML. Cette méthode semble être assez lente.Quelle est la meilleure façon de faire une console avec DHTML?

<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>

Source

2009-03-31 TJR

La vitesse me semble bien, même si le défilement peut causer des problèmes avec beaucoup de journaux qui se passent rapidement. Seul problème que je vois est que dans FF le rendu des messages de journal meurt après environ 2300 (montre juste vide après cela), bien que IE et chrome le rendent bien. – Herms

Quel est le cas d'utilisation ici? Pour le débogage, console.log de Firebug est tout ce que je peux imaginer. Pour votre cas particulier, si vous voulez vraiment aller sur la page et trouver votre solution actuelle trop lente, je remplacerais définitivement toutes les concaténations de chaînes par quelque chose d'un peu plus efficace (en poussant les chaînes dans un tableau et en les joignant à la fin, ou un StringBuffer qui l'extrait), comme la manipulation de chaîne en Javascript est infamously bad dans some browsers (je te regarde, Redmond!)

Source

2009-03-31 16:03:08

Par curiosité, j'ai modifié son code pour utiliser la méthode tableau. 10x plus vite! (Le code original a pris 11 secondes dans Chrome. La méthode de tableau a pris un peu moins de 2 secondes). – Herms

Yup. Fait un monde de différence. –

Firebug est sympa si tu utilises Firefox pour tester ton travail (en supposant que vous voulez enregistrer les messages à des fins de débogage). Si vous testez d'autres navigateurs, vous pouvez également utiliser Firebug Lite qui reproduit les fonctionnalités de Firebug dans d'autres navigateurs. De cette façon, vous n'avez pas à réinventer la roue.

Source

2009-03-31 16:49:51

Quelle est la meilleure façon de faire une console avec DHTML?

Répondre

Questions connexes