core: 日志显示使用缓冲区，避免卡顿

Author: bin456789

logviewer.html

@@ -66,6 +66,12 @@
         const scrollToBottomButton = document.getElementById('scroll-to-bottom');
         let shouldScrollToBottom = true;
 
+        // 缓冲区相关
+        let messageBuffer = [];
+        let flushScheduled = false;
+        const BUFFER_FLUSH_INTERVAL = 100; // 毫秒
+        const BUFFER_MAX_SIZE = 50; // 最大缓冲消息数
+
         scrollToBottomButton.addEventListener('click', () => {
             logContainer.scrollTop = logContainer.scrollHeight;
         });
@@ -81,30 +87,71 @@
             shouldScrollToBottom = isAtBottom;
         });
 
+        // 刷新缓冲区到 DOM
+        function flushBuffer() {
+            if (messageBuffer.length === 0) {
+                flushScheduled = false;
+                return;
+            }
+
+            // 批量更新文本内容
+            const batchText = messageBuffer.join('\n');
+            logContainer.textContent += '\n' + batchText;
+
+            // 检查状态变化（优先级：error > done > start）
+            if (batchText.includes('***** ERROR *****')) {
+                document.body.className = 'error';
+            } else if (batchText.includes('***** DONE *****')) {
+                document.body.className = 'done';
+            } else if (batchText.includes('***** START TRANS *****')) {
+                document.body.className = '';
+            }
+
+            // 自动滚动
+            if (shouldScrollToBottom) {
+                logContainer.scrollTop = logContainer.scrollHeight;
+            }
+
+            // 清空缓冲区
+            messageBuffer = [];
+            flushScheduled = false;
+        }
+
+        // 调度刷新
+        function scheduleFlush() {
+            if (!flushScheduled) {
+                flushScheduled = true;
+                requestAnimationFrame(() => {
+                    setTimeout(flushBuffer, BUFFER_FLUSH_INTERVAL);
+                });
+            }
+        }
+
+        // 添加消息到缓冲区
+        function bufferMessage(message) {
+            messageBuffer.push(message);
+
+            // 如果缓冲区满了，立即刷新
+            if (messageBuffer.length >= BUFFER_MAX_SIZE) {
+                if (flushScheduled) {
+                    // 取消之前的调度，立即刷新
+                    flushScheduled = false;
+                }
+                flushBuffer();
+            } else {
+                scheduleFlush();
+            }
+        }
+
         var ws = new ReconnectingWebSocket('ws://' + location.host + '/');
         ws.onopen = function () {
-            logContainer.textContent += '\nWebSocket Connected.';
+            bufferMessage('WebSocket Connected.');
         };
         ws.onclose = function () {
-            logContainer.textContent += '\nWebSocket Disconnected.';
+            bufferMessage('WebSocket Disconnected.');
         };
         ws.onmessage = function (event) {
-            logContainer.textContent += '\n' + event.data;
-            if (shouldScrollToBottom) {
-                logContainer.scrollTop = logContainer.scrollHeight;
-            }
-            // 开始/重新开始
-            if (event.data.includes('***** START TRANS *****')) {
-                document.body.className = ''
-            }
-            // 错误
-            else if (event.data.includes('***** ERROR *****')) {
-                document.body.className = 'error'
-            }
-            // 完成
-            else if (event.data.includes('***** DONE *****')) {
-                document.body.className = 'done'
-            }
+            bufferMessage(event.data);
         };
     </script>
 </body>