html div size,Managing HTML5 DIV Size

问题

So some time ago I developed a web application that allows users to launch a system application and view the debug log of that application in browser. I used Server Side EventSource to update a

each time a new line is written to the debug file. The end result is something like a "tail -f" in browser. Everything was working pretty well until someone started using the application in a different way where > 10,000 lines are written to the debug file.

Depending on the system and browser, anything over ~8-10k lines causes the browser to hang and respond extremely slowly. Unfortunately I can not place controls on what is written to the debug file but I thought that I could only display the last 2k lines. However, this page is brought up immediately after the system application is launched and the user stays on this page until the system application call completes..... So is there any way to clear what is written to the

tag in a FIFO manner? Otherwise, is there a way to improve performance to handle larger data size? Here are some relevant code snips from the PHP..

This is the page that has the

that is updated:

if(typeof(EventSource) !== "undefined") {

var source = new EventSource("stream.php<?php echo $built_url; ?>&inserted_procedure_id=<?php

echo $_GET['inserted_procedure_id'];

?>");

source.onmessage = function(event) {

document.getElementById("debug").innerHTML += event.data + "
";

var objDiv = document.getElementById('debug');

objDiv.scrollTop = objDiv.scrollHeight;

};

} else {

document.getElementById("debug").innerHTML = "Sorry, real time debug requires a modern browser with support for server side events. Please use current version of Firefox, Chrome or Safari for real-time debug... ";

}

This is from stream.php which is called by the previous

if($_SESSION['done'] == 0 ){

clearstatcache();

$currentSize = filesize($file);

//echo "data: Test running, please wait ".$size."\n\n";

if ($size != $currentSize) {

$fh = fopen($file, "r");

fseek($fh, $size);

$dcounter=0;

sleep(5);

while ($d = fgets($fh)) {

//$d=str_replace(' ',' ',$d);

if (preg_match("/Executing test case:/", $d)) {

echo "data:

}

echo "data: ".htmlspecialchars($d)."\n\n";

if (preg_match("/Please select continue when above instruction is complete/", $d)) {

$sql="SELECT wait FROM test_procedure_execution WHERE id=".$proc_id.";";

$sql_result=mysqli_query($con,"$sql");

$sql_row=mysqli_fetch_row($sql_result);

if($sql_row[0]==1){

echo "data:

\n\n";

echo "data: \n\n";

}

}

$dcounter++;

//ob_flush();

//flush();

}

fclose($fh);

$_SESSION["size"] = $currentSize;

}

回答1:

After appending the message HTML of the last event to document.getElementById("debug").innerHTML, you should do the processing. Possibly something like this:

var content = document.getElementById("debug").innerHTML + event.data + "
";

var lines = content.split("
");

lines = lines.splice(lines.length - 2000, 2000);

document.getElementById("debug").innerHTML = lines.join("
");

来源：https://stackoverflow.com/questions/35629215/managing-html5-div-size