perf: defer UI updates away from input logic (@Miodec) (monkeytypegame#7162)

Together with monkeytypegame#7119, input handling is 3x faster. Achieved by:
- deferring all UI updates to when the browser is ready and debouncing
ui calls.
 - using vanilla js where needed
 - caching dom elements
 - disabling expensive checks if the timer is slow
 - switching to a timer that uses RAF instead of setTimeout
 - moving some code around

This should make the site smother on slower devices and fix lag spikes
causing weird test data.

Author: Miodec

frontend/src/html/pages/test.html

@@ -192,6 +192,9 @@
     <div id="premidTestMode" class="hidden"></div>
     <div id="premidSecondsLeft" class="hidden"></div>
   </div>
+  <div class="loading hidden">
+    <i class="fas fa-circle-notch fa-spin"></i>
+  </div>
   <div id="result" class="content-grid full-width hidden" tabindex="-1">
     <div class="wrapper">
       <div class="stats">

frontend/src/index.html

@@ -7,7 +7,7 @@
     <load src="html/warnings.html" />
     <div id="fpsCounter" class="hidden"></div>
     <div class="customBackground"></div>
-    <div id="backgroundLoader" style="display: none"></div>
+    <div id="backgroundLoader" class="hidden"></div>
     <div id="bannerCenter" class="focus"></div>
     <div id="notificationCenter">
       <div class="clearAll button invisible" style="display: none">

frontend/src/styles/animations.scss

@@ -10,6 +10,15 @@
   }
 }
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @keyframes caretFlashSmooth {
   0%,
   100% {

frontend/src/styles/core.scss

@@ -192,6 +192,7 @@ body {
   background: var(--main-color);
   animation: loader 2s cubic-bezier(0.38, 0.16, 0.57, 0.82) infinite;
   z-index: 9999;
+  opacity: 0;
 }
 
 key {

frontend/src/styles/test.scss

@@ -589,7 +589,7 @@
 }
 
 #wordsInput {
-  width: 1ch;
+  width: 0;
   font-size: 1em;
   height: 1em;
   opacity: 0;
@@ -631,6 +631,22 @@
   }
 }
 
+.pageTest > .loading {
+  text-align: center;
+  & > i {
+    font-size: 2rem;
+    color: var(--main-color);
+  }
+  opacity: 0;
+  &:not(.hidden) {
+    animation-name: fadeIn;
+    animation-duration: 0.125s;
+    animation-delay: 0.5s;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease;
+  }
+}
+
 #result {
   &:focus-visible {
     outline: none;

frontend/src/ts/elements/keymap.ts

@@ -16,6 +16,7 @@ import { getActiveFunboxNames } from "../test/funbox/list";
 import { areSortedArraysEqual } from "../utils/arrays";
 import { LayoutObject } from "@monkeytype/schemas/layouts";
 import { animate } from "animejs";
+import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 
 export const keyDataDelimiter = "\uE000";
 
@@ -72,62 +73,67 @@ function findKeyElements(char: string): JQuery {
 
 function highlightKey(currentKey: string): void {
   if (Config.mode === "zen") return;
-  if (currentKey === "") currentKey = " ";
-  try {
-    $(".activeKey").removeClass("activeKey");
+  requestDebouncedAnimationFrame("keymap.highlightKey", async () => {
+    if (currentKey === "") currentKey = " ";
+    try {
+      document
+        .querySelectorAll(".activeKey")
+        .forEach((el) => el.classList.remove("activeKey"));
 
-    if (Config.language.startsWith("korean")) {
-      currentKey = Hangul.disassemble(currentKey)[0] ?? currentKey;
-    }
+      if (Config.language.startsWith("korean")) {
+        currentKey = Hangul.disassemble(currentKey)[0] ?? currentKey;
+      }
 
-    const $target = findKeyElements(currentKey);
-    $target.addClass("activeKey");
-  } catch (e) {
-    if (e instanceof Error) {
-      console.log("could not update highlighted keymap key: " + e.message);
+      const $target = findKeyElements(currentKey);
+      $target.addClass("activeKey");
+    } catch (e) {
+      if (e instanceof Error) {
+        console.log("could not update highlighted keymap key: " + e.message);
+      }
     }
-  }
+  });
 }
 
 async function flashKey(key: string, correct?: boolean): Promise<void> {
   if (key === undefined) return;
+  requestDebouncedAnimationFrame(`keymap.flashKey.${key}`, async () => {
+    const $target = findKeyElements(key);
 
-  const $target = findKeyElements(key);
-
-  const elements = $target.toArray();
-  if (elements.length === 0) return;
+    const elements = $target.toArray();
+    if (elements.length === 0) return;
 
-  const themecolors = await ThemeColors.getAll();
+    const themecolors = await ThemeColors.getAll();
 
-  try {
-    let startingStyle = {
-      color: themecolors.bg,
-      backgroundColor: themecolors.sub,
-      borderColor: themecolors.sub,
-    };
-
-    if (correct || Config.blindMode) {
-      startingStyle = {
-        color: themecolors.bg,
-        backgroundColor: themecolors.main,
-        borderColor: themecolors.main,
-      };
-    } else {
-      startingStyle = {
+    try {
+      let startingStyle = {
         color: themecolors.bg,
-        backgroundColor: themecolors.error,
-        borderColor: themecolors.error,
+        backgroundColor: themecolors.sub,
+        borderColor: themecolors.sub,
       };
-    }
 
-    animate(elements, {
-      color: [startingStyle.color, themecolors.sub],
-      backgroundColor: [startingStyle.backgroundColor, themecolors.subAlt],
-      borderColor: [startingStyle.borderColor, themecolors.sub],
-      duration: 250,
-      easing: "out(5)",
-    });
-  } catch (e) {}
+      if (correct || Config.blindMode) {
+        startingStyle = {
+          color: themecolors.bg,
+          backgroundColor: themecolors.main,
+          borderColor: themecolors.main,
+        };
+      } else {
+        startingStyle = {
+          color: themecolors.bg,
+          backgroundColor: themecolors.error,
+          borderColor: themecolors.error,
+        };
+      }
+
+      animate(elements, {
+        color: [startingStyle.color, themecolors.sub],
+        backgroundColor: [startingStyle.backgroundColor, themecolors.subAlt],
+        borderColor: [startingStyle.borderColor, themecolors.sub],
+        duration: 250,
+        easing: "out(5)",
+      });
+    } catch (e) {}
+  });
 }
 
 export function hide(): void {

frontend/src/ts/elements/loader.ts

@@ -1,31 +1,31 @@
-const element = $("#backgroundLoader");
-let timeout: NodeJS.Timeout | null = null;
-let visible = false;
+import { animate, JSAnimation } from "animejs";
+import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 
-function clearTimeout(): void {
-  if (timeout !== null) {
-    window.clearTimeout(timeout);
-    timeout = null;
-  }
-}
+const element = document.querySelector("#backgroundLoader") as HTMLElement;
+let showAnim: JSAnimation | null = null;
 
 export function show(instant = false): void {
-  if (visible) return;
-
-  if (instant) {
-    element.stop(true, true).show();
-    visible = true;
-  } else {
-    timeout = setTimeout(() => {
-      element.stop(true, true).show();
-    }, 125);
-    visible = true;
-  }
+  requestDebouncedAnimationFrame("loader.show", () => {
+    showAnim = animate(element, {
+      opacity: 1,
+      duration: 125,
+      delay: instant ? 0 : 125,
+      onBegin: () => {
+        element.classList.remove("hidden");
+      },
+    });
+  });
 }
 
 export function hide(): void {
-  if (!visible) return;
-  clearTimeout();
-  element.stop(true, true).fadeOut(125);
-  visible = false;
+  requestDebouncedAnimationFrame("loader.hide", () => {
+    showAnim?.pause();
+    animate(element, {
+      opacity: 0,
+      duration: 125,
+      onComplete: () => {
+        element.classList.add("hidden");
+      },
+    });
+  });
 }

frontend/src/ts/elements/monkey-power.ts

@@ -2,6 +2,10 @@ import * as ThemeColors from "./theme-colors";
 import * as SlowTimer from "../states/slow-timer";
 import Config from "../config";
 import { isSafeNumber } from "@monkeytype/util/numbers";
+import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
+
+const html = document.querySelector("html") as HTMLElement;
+const body = document.body;
 
 type Particle = {
   x: number;
@@ -14,7 +18,7 @@ type Particle = {
 
 type CTX = {
   particles: Particle[];
-  caret?: JQuery;
+  caret?: HTMLElement;
   canvas?: HTMLCanvasElement;
   context2d?: CanvasRenderingContext2D;
   rendering: boolean;
@@ -118,7 +122,7 @@ function updateParticle(particle: Particle): void {
 }
 
 export function init(): void {
-  ctx.caret = $("#caret");
+  ctx.caret = document.querySelector("#caret") as HTMLElement;
   ctx.canvas = createCanvas();
   ctx.context2d = ctx.canvas.getContext("2d") as CanvasRenderingContext2D;
 }
@@ -155,7 +159,7 @@ function render(): void {
   }
   ctx.particles = keep;
 
-  if (ctx.particles.length && !SlowTimer.get()) {
+  if (ctx.particles.length) {
     requestAnimationFrame(render);
   } else {
     ctx.context2d.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
@@ -168,14 +172,13 @@ export function reset(immediate = false): void {
   delete ctx.resetTimeOut;
 
   clearTimeout(ctx.resetTimeOut);
-  const body = $(document.body);
-  body.css("transition", "all .25s, transform 0.8s");
-  body.css("transform", `translate(0,0)`);
+  body.style.transition = "all .25s, transform 0.8s";
+  body.style.transform = `translate(0,0)`;
   setTimeout(
     () => {
-      body.css("transition", "all .25s, transform .05s");
-      $("html").css("overflow", "inherit");
-      $("html").css("overflow-y", "scroll");
+      body.style.transition = "all .25s, transform .05s";
+      html.style.overflow = "inherit";
+      html.style.overflowY = "scroll";
     },
     immediate ? 0 : 1000,
   );
@@ -201,47 +204,46 @@ function randomColor(): string {
 export async function addPower(good = true, extra = false): Promise<void> {
   if (Config.monkeyPowerLevel === "off" || SlowTimer.get()) return;
 
-  if (Config.blindMode) good = true;
-
-  // Shake
-  if (["3", "4"].includes(Config.monkeyPowerLevel)) {
-    $("html").css("overflow", "hidden");
-    const shake = [
-      Math.round(shakeAmount - Math.random() * shakeAmount),
-      Math.round(shakeAmount - Math.random() * shakeAmount),
+  requestDebouncedAnimationFrame("monkey-power.addPower", async () => {
+    if (Config.blindMode) good = true;
+
+    // Shake
+    if (["3", "4"].includes(Config.monkeyPowerLevel)) {
+      html.style.overflow = "hidden";
+      const shake = [
+        Math.round(shakeAmount - Math.random() * shakeAmount),
+        Math.round(shakeAmount - Math.random() * shakeAmount),
+      ];
+      body.style.transform = `translate(${shake[0]}px, ${shake[1]}px)`;
+      if (isSafeNumber(ctx.resetTimeOut)) clearTimeout(ctx.resetTimeOut);
+      ctx.resetTimeOut = setTimeout(reset, 2000) as unknown as number;
+    }
+
+    // Sparks
+    const offset = ctx.caret?.getBoundingClientRect();
+    const coords = [
+      offset?.left ?? 0,
+      (offset?.top ?? 0) + (ctx.caret?.offsetHeight ?? 0) / 2,
     ];
-    $(document.body).css(
-      "transform",
-      `translate(${shake[0]}px, ${shake[1]}px)`,
-    );
-    if (isSafeNumber(ctx.resetTimeOut)) clearTimeout(ctx.resetTimeOut);
-    ctx.resetTimeOut = setTimeout(reset, 2000) as unknown as number;
-  }
 
-  // Sparks
-  const offset = ctx.caret?.offset();
-  const coords = [
-    offset?.left ?? 0,
-    (offset?.top ?? 0) + (ctx.caret?.height() ?? 0),
-  ];
-
-  for (
-    let i = Math.round(
-      (particleCreateCount[0] + Math.random() * particleCreateCount[1]) *
-        (extra ? 2 : 1),
-    );
-    i > 0;
-    i--
-  ) {
-    const color = ["2", "4"].includes(Config.monkeyPowerLevel)
-      ? randomColor()
-      : good
-        ? await ThemeColors.get("caret")
-        : await ThemeColors.get("error");
-    ctx.particles.push(
-      createParticle(...(coords as [x: number, y: number]), color),
-    );
-  }
-
-  startRender();
+    for (
+      let i = Math.round(
+        (particleCreateCount[0] + Math.random() * particleCreateCount[1]) *
+          (extra ? 2 : 1),
+      );
+      i > 0;
+      i--
+    ) {
+      const color = ["2", "4"].includes(Config.monkeyPowerLevel)
+        ? randomColor()
+        : good
+          ? await ThemeColors.get("caret")
+          : await ThemeColors.get("error");
+      ctx.particles.push(
+        createParticle(...(coords as [x: number, y: number]), color),
+      );
+    }
+
+    startRender();
+  });
 }