Implement runner execution function without async

This improves performance on firefox by ~50%

Author: gfeun

demo/src/execute.ts

@@ -15,6 +15,28 @@ import { loadHex } from './intelhex';
 // ATmega328p params
 const FLASH = 0x8000;
 
+const timeouts: Function[] = new Array<Function>();
+const messageName = 'zero-timeout-message';
+
+function handleMessage(event: MessageEvent) {
+  if (event.source == window && event.data == messageName) {
+    event.stopPropagation();
+    if (timeouts.length > 0) {
+      const fn = timeouts.shift();
+      if (fn !== undefined) {
+        fn();
+      }
+    }
+  }
+}
+
+function setZeroTimeout(fn: Function) {
+  timeouts.push(fn);
+  window.postMessage(messageName, '*');
+}
+
+window.addEventListener('message', handleMessage, true);
+
 export class AVRRunner {
   readonly program = new Uint16Array(FLASH);
   readonly cpu: CPU;
@@ -24,8 +46,10 @@ export class AVRRunner {
   readonly portD: AVRIOPort;
   readonly usart: AVRUSART;
   readonly speed = 16e6; // 16 MHZ
+  readonly workUnitCycles = 100000;
 
   private stopped = false;
+  private nextTick = 0;
 
   constructor(hex: string) {
     loadHex(hex, new Uint8Array(this.program.buffer));
@@ -41,13 +65,21 @@ export class AVRRunner {
     this.stopped = false;
     const workUnitCycles = 500000;
     let nextTick = this.cpu.cycles + workUnitCycles;
+
     for (;;) {
       avrInstruction(this.cpu);
       this.timer.tick();
       this.usart.tick();
       if (this.cpu.cycles >= nextTick) {
         callback(this.cpu);
-        await new Promise((resolve) => setTimeout(resolve, 0));
+        const prevTime = performance.now();
+        await new Promise((resolve) => setZeroTimeout(resolve));
+        //await new Promise((resolve) => setTimeout(resolve, 0));
+        //await new Promise((resolve) => window.requestAnimationFrame(resolve))
+        const afterTime = performance.now();
+
+        console.log('execute await timing', afterTime - prevTime, 'ms');
+
         if (this.stopped) {
           break;
         }
@@ -56,6 +88,37 @@ export class AVRRunner {
     }
   }
 
+  // Reimplementatio
+  executeNoAsync(callback: (cpu: CPU) => void) {
+    // Initialize on first function start
+    // Not sure why this is useful since this.cpu.cycles is always = to 0 on start
+    // Maybe for the possibility to stop and resume execution ?
+    if (this.nextTick === 0) {
+      this.nextTick = this.cpu.cycles + this.workUnitCycles;
+    }
+
+    for (;;) {
+      avrInstruction(this.cpu);
+      this.timer.tick();
+      this.usart.tick();
+      if (this.cpu.cycles >= this.nextTick) {
+        callback(this.cpu);
+
+        if (this.stopped) {
+          return;
+        }
+
+        this.nextTick += this.workUnitCycles;
+
+        // We've done our chunk of work, exit the loop
+        break;
+      }
+    }
+
+    // Schedule next execution
+    setZeroTimeout(() => this.executeNoAsync(callback));
+  }
+
   stop() {
     this.stopped = true;
   }

demo/src/index.ts

@@ -69,7 +69,7 @@ function executeProgram(hex: string) {
     serialOutputText.textContent += String.fromCharCode(value);
   };
   const cpuPerf = new CPUPerformance(runner.cpu, MHZ);
-  runner.execute((cpu) => {
+  runner.executeNoAsync((cpu) => {
     const time = formatTime(cpu.cycles / MHZ);
     const speed = (cpuPerf.update() * 100).toFixed(0);
     statusLabel.textContent = `Simulation time: ${time} (${speed}%)`;