perf: speed up focus.set by ~22x

Author: Miodec

frontend/src/ts/test/focus.ts

@@ -8,46 +8,80 @@ import * as PageTransition from "../states/page-transition";
 const unfocusPx = 3;
 let state = false;
 
-export function set(foc: boolean, withCursor = false): void {
-  if (foc && !state) {
+let cacheReady = false;
+let cache: {
+  focus?: HTMLElement[];
+  cursor?: HTMLElement[];
+} = {};
+
+function initializeCache(): void {
+  if (cacheReady) return;
+
+  const cursorSelector = "body, button, a";
+  const elementsSelector = [
+    "app",
+    "header",
+    "footer",
+    "main",
+    "#bannerCenter",
+    "#notificationCenter",
+    "#capsWarning",
+    "#ad-vertical-right-wrapper",
+    "#ad-vertical-left-wrapper",
+    "#ad-footer-wrapper",
+    "#ad-footer-small-wrapper",
+  ].join(",");
+
+  cache.cursor = [...document.querySelectorAll<HTMLElement>(cursorSelector)];
+  cache.focus = [...document.querySelectorAll<HTMLElement>(elementsSelector)];
+
+  cacheReady = true;
+}
+
+// with cursor is a special case that is only used on the initial page load
+// to avoid the cursor being invisible and confusing the user
+export function set(value: boolean, withCursor = false): void {
+  initializeCache();
+
+  if (value && !state) {
     state = true;
+
+    // batch DOM operations for better performance
+    requestAnimationFrame(() => {
+      if (cache.focus) {
+        for (const el of cache.focus) {
+          el.classList.add("focus");
+        }
+      }
+      if (!withCursor && cache.cursor) {
+        for (const el of cache.cursor) {
+          el.style.cursor = "none";
+        }
+      }
+    });
+
     Caret.stopAnimation();
-    $("header").addClass("focus");
-    $("footer").addClass("focus");
-    if (!withCursor) {
-      $("body").css("cursor", "none");
-      $("button").css("cursor", "none");
-      $("a").css("cursor", "none");
-    }
-    $("main").addClass("focus");
-    $("#bannerCenter").addClass("focus");
-    $("#notificationCenter").addClass("focus");
-    $("#capsWarning").addClass("focus");
-    $("#ad-vertical-right-wrapper").addClass("focus");
-    $("#ad-vertical-left-wrapper").addClass("focus");
-    $("#ad-footer-wrapper").addClass("focus");
-    $("#ad-footer-small-wrapper").addClass("focus");
     LiveSpeed.show();
     LiveBurst.show();
     LiveAcc.show();
     TimerProgress.show();
-  } else if (!foc && state) {
+  } else if (!value && state) {
     state = false;
+
+    requestAnimationFrame(() => {
+      if (cache.focus) {
+        for (const el of cache.focus) {
+          el.classList.remove("focus");
+        }
+      }
+      if (cache.cursor) {
+        for (const el of cache.cursor) {
+          el.style.cursor = "";
+        }
+      }
+    });
+
     Caret.startAnimation();
-    $("header").removeClass("focus");
-    $("footer").removeClass("focus");
-    $("body").css("cursor", "");
-    $("button").css("cursor", "");
-    $("a").css("cursor", "");
-    $("main").removeClass("focus");
-    $("#bannerCenter").removeClass("focus");
-    $("#notificationCenter").removeClass("focus");
-    $("#capsWarning").removeClass("focus");
-    $("#app").removeClass("focus");
-    $("#ad-vertical-right-wrapper").removeClass("focus");
-    $("#ad-vertical-left-wrapper").removeClass("focus");
-    $("#ad-footer-wrapper").removeClass("focus");
-    $("#ad-footer-small-wrapper").removeClass("focus");
     LiveSpeed.hide();
     LiveBurst.hide();
     LiveAcc.hide();