performance/throttle-fps-to-60

client/svelte-client/src/components/Text.svelte

@@ -14,7 +14,6 @@
 
     renderable(props => {
         const { engineCtx: ctx } = props;
-        console.log({text})
         if (text) {
             ctx.fillStyle = mainColor;
             ctx.font = `${fontSize}px ${fontFamily}`;

client/svelte-client/src/components/TickWrapper.svelte

@@ -6,6 +6,9 @@
     export let inputs;
     export let killLoopOnError = true;
 
+    const targetFps = 60;
+    const frameThreshold = 1_000 / targetFps;
+
     let frame: number;
 
     onMount(() => {
@@ -16,14 +19,17 @@
 
     function createLoop (fn) {
         let elapsed = 0;
-        let lastTime = performance.now();
+        let lastTime = Date.now();
         (function loop() {
             frame = requestAnimationFrame(loop);
-            const beginTime = performance.now();
-            const dt = (beginTime - lastTime) / 1000;
-            lastTime = beginTime;
-            elapsed += dt;
-            fn(elapsed, dt);
+            const now = Date.now();
+            const dtMs = now - lastTime;
+            if (dtMs < frameThreshold) {
+                return;
+            }
+            lastTime = now - (dtMs % frameThreshold);
+            elapsed += dtMs;
+            fn(elapsed / 1_000, dtMs / 1_000);
         })();
         return () => {
             cancelAnimationFrame(frame);

server/src/main.rs

@@ -27,7 +27,7 @@ mod session;
 pub async fn main() {
     let compound_policy = Box::new(CompoundPolicy::new(Box::new(SizeTrigger::new(2u64.pow(20) * 10)), Box::new(DeleteRoller::new())));
     let logfile = RollingFileAppender::builder()
-        .encoder(Box::new(PatternEncoder::new("{d(%Y-%m-%d %H:%M:%S%.f)} [{l}] - {m}\n")))
+        .encoder(Box::new(PatternEncoder::new("{d(%Y-%m-%d %H:%M:%S%.f)} [{l}] - [{M}:{L}] {m}\n")))
         .append(true)
         .build("log/output.log", compound_policy).unwrap();