From 53fa574c9af4095f07f4883547939a25522f81e6 Mon Sep 17 00:00:00 2001
From: Ben Bridle <ben@derelict.engineering>
Date: Sun, 7 Sep 2025 18:46:29 +1200
Subject: Improve transmission rendering performance

Previously, the DOM would be updated every time a complete character
was pushed to the transmission parser by the stream device. This caused
frequent re-renders of the transmission panel and massively slowed down
the emulator.

To fix this, the contents of the transmission parser are now only
flushed to the transmission panel when the state panel updates, which
is currently every 10_000 cycles.
---
 bedrock.js | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

(limited to 'bedrock.js')

diff --git a/bedrock.js b/bedrock.js
index 19d4c99..a0155e7 100644
--- a/bedrock.js
+++ b/bedrock.js
@@ -360,7 +360,7 @@ function EmulatorElement(options) {
     emulator.canvas = canvas;
     let br = new Bedrock(emulator);
     br.reset();
-    br.onUpdate = () => emulator.updateStatePanel();
+    br.onUpdate = () => emulator.updateDOM();
 
     emulator.showStatePanel = function() {
         statePanel.classList.remove('hidden'); }
@@ -397,14 +397,14 @@ function EmulatorElement(options) {
     // Fires when the stop button is pressed.
     emulator.stopProgram = function() {
         br.stop();
-        emulator.updateStatePanel();
+        emulator.updateDOM();
         transmissions.innerHTML = '';
         emulator.hideStreamPanel();
         emulator.hideScreenPanel();
         currentTransmission = null;
     }
 
-    emulator.updateStatePanel = function() {
+    emulator.updateDOM = function() {
         function renderStack(stack) {
             let string = '';
             for (let i=0; i<stack.p && i<stack.mem.length; i++) {
@@ -428,6 +428,7 @@ function EmulatorElement(options) {
         } else {
             status.textContent = `running / ${br.cycle}`;
         }
+        emulator.flushTransmission();
     }
 
     emulator.updateScreenSize = function() {
@@ -446,20 +447,28 @@ function EmulatorElement(options) {
 
     // Receive an incoming byte from the local stream.
     emulator.receiveTransmissionByte = function(byte) {
-        if (!currentTransmission) {
-            emulator.showStreamPanel();
-            let element = document.createElement('li');
-            element.addEventListener('click', function() {
-                copyText(element.textContent); })
-            currentTransmission = element;
-            transmissions.appendChild(element); }
         transmissionParser.push(byte);
-        currentTransmission.textContent += transmissionParser.read();
-        streamPanel.scrollTop = streamPanel.scrollHeight;
+    }
+
+    // Push all received bytes to the DOM.
+    emulator.flushTransmission = function() {
+        let string = transmissionParser.read();
+        if (string) {
+            if (!currentTransmission) {
+                emulator.showStreamPanel();
+                let element = document.createElement('li');
+                element.addEventListener('click', function() {
+                    copyText(element.textContent); })
+                currentTransmission = element;
+                transmissions.appendChild(element); }
+            currentTransmission.textContent += string;
+            streamPanel.scrollTop = streamPanel.scrollHeight;
+        }
     }
 
     // End the current incoming transmission.
     emulator.endTransmission = function() {
+        emulator.flushTransmission();
         streamPanel.scrollTop = streamPanel.scrollHeight;
         currentTransmission = null;
 
-- 
cgit v1.2.3-70-g09d2