javascript - 管理 HTML5 DIV 大小

Question

所以前段时间我开发了一个Web应用程序，允许用户启动系统应用程序并在浏览器中查看该应用程序的调试日志。我使用服务器端 EventSource 更新了 <div>每次将新行写入调试文件时。最终结果类似于浏览器中的“tail -f”。一切都运行得很好，直到有人开始以不同的方式使用该应用程序，其中超过 10,000 行被写入调试文件。

根据系统和浏览器的不同，任何超过 8-10k 行的内容都会导致浏览器挂起并响应极其缓慢。不幸的是，我无法控制写入调试文件的内容，但我认为只能显示最后 2k 行。然而，这个页面是在系统应用程序启动后立即调出的，并且用户一直停留在这个页面上，直到系统应用程序调用完成......那么有什么方法可以清除写入<div>的内容。以先进先出的方式标记？否则，有没有办法提高性能来处理更大的数据量？以下是 PHP 中的一些相关代码片段..

此页面包含 <div>已更新:

    <script>
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 + "<br>";
        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...  ";
}
</script>

这是来自前面调用的stream.php

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: <div style='position: fixed; bottom: 16px; width: 55px; height: 30px; z-index: 1002;'><form name='abort' id='abort' method='post' enctype='multipart/form-data' action='executor_state_change.php'><input type=hidden name=kill value=".$pid."/><font color=black><input type='button' value='Abort' onclick=openPopup();></font></form></div>\n\n";        
        }
        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: <form name='continue' id='continue' method='post' enctype='multipart/form-data' action='continue.php'><input type=hidden name=test_procedure_execution_id value=".$proc_id." /><font color=black><input type='submit' value='Continue' onclick='button.style.display =none;'></font></form>\n\n";       
                echo "data: <audio autoplay loop><source src='sounds/alert.wav' type='audio/wav'></audio>\n\n";
            }                   
        }
        $dcounter++;
        //ob_flush();
        //flush();
    }
    fclose($fh);

    $_SESSION["size"] = $currentSize;
}

Answer 1

将最后一个事件的消息 HTML 附加到 document.getElementById("debug").innerHTML 后，您应该进行处理。可能是这样的:

var content = document.getElementById("debug").innerHTML + event.data + "<br>";
var lines = content.split("<br>");
lines = lines.splice(lines.length - 2000, 2000);
document.getElementById("debug").innerHTML = lines.join("<br>");