使用PHP +js +html 实现 网页上实时打印超大文件日志内容

实时打印超大文件日志内容，可以使用以下方法：

1. 服务器端定时读取日志文件内容，保存到缓存中。
2. 客户端通过Ajax轮询请求服务器，获取最新的日志信息，并将其实时展示在网页上。
3. 为了避免页面过于卡顿，可以设置一个缓存大小，每次只显示最新的一部分日志内容，同时提供滚动条让用户可以查看更多。
4. 为了提高性能，可以在客户端使用WebSocket协议，实现服务器与客户端之间的实时通信，避免轮询带来的性能损耗。

下面是一个简单的示例代码：

服务端代码(PHP)：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$file = '/path/to/logfile.log';
$lastSize = 0;

while(true) {
    clearstatcache();
    $size = filesize($file);
    
    if($size > $lastSize) {
        $handle = fopen($file, 'r');
        fseek($handle, $lastSize);
        $content = fread($handle, $size - $lastSize);
        fclose($handle);
        
        echo "data: " . json_encode(array('content' => $content)) . "\n\n";
        
        ob_flush();
        flush();
        
        $lastSize = $size;
    }
    
    sleep(1);
}

客户端代码(JavaScript)：

var logContainer = document.getElementById('log-container');

var source = new EventSource('/path/to/server.php');

source.onmessage = function(event) {
    var data = JSON.parse(event.data);
    var content = data.content;
    
    logContainer.innerText += content;
    
    // 只保留最新的100行日志
    var lines = logContainer.innerText.split('\n');
    if(lines.length > 100) {
        logContainer.innerText = lines.slice(-100).join('\n');
    }
};

HTML代码：

<div id="log-container"></div>