管理 HTML5 DIV 大小

Managing HTML5 DIV Size

本文关键字：大小 DIV HTML5 管理      更新时间：2023-09-26

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

根据系统和浏览器的不同，任何超过 ~8-10k 行的内容都会导致浏览器挂起并响应非常缓慢。 不幸的是，我无法对写入调试文件的内容进行控制，但我认为我只能显示最后 2k 行。 但是，此页面在系统应用程序启动后立即打开，用户将停留在此页面上，直到系统应用程序调用完成..... 那么有没有办法清除以FIFO方式写入<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>

这是来自流.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(' ','&nbsp;',$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;
}

将最后一个事件的消息 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>");
相关文章：