Управление размером HTML5 DIV

Поэтому некоторое время назад я разработал веб-приложение, которое позволяет пользователям запускать системное приложение и просматривать журнал отладки этого приложения в браузере. Я использовал Server Side EventSource для обновления <div> каждый раз, когда новая строка записывается в файл отладки. Конечный результат – это что-то вроде «tail -f» в браузере. Все работает очень хорошо, пока кто-то не начал использовать приложение по-другому, где> 10 000 строк записываются в файл отладки.

В зависимости от системы и браузера, что-то более ~ 8-10k линий заставляет браузер зависать и реагировать очень медленно. К сожалению, я не могу помещать элементы управления в то, что записано в файл отладки, но я думал, что могу отображать только последние 2k строк. Однако эта страница возникает сразу после запуска системного приложения, и пользователь остается на этой странице до тех пор, пока не завершится вызов системного приложения. Итак, есть ли способ очистить написанное тегу <div> в Способ FIFO? В противном случае существует ли способ повысить производительность для обработки большего размера данных? Вот некоторые соответствующие коды кода из 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(' ','&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; }