Reduce performance lost on large screens

nginx/vue/src/components/text/Headline.vue

@@ -5,21 +5,31 @@ const container = useTemplateRef("container");
 const item1 = useTemplateRef("item1");
 
 let offset = 0;
+let cachedWidth = 0;
 
 let rafId;
 
 const speed = 0.5; // pixels per frame
 
-function animate() {
+function measureWidth() {
     const ctnr = container.value;
     const it1 = item1.value;
+    if (ctnr && it1) {
+        cachedWidth = Math.max(ctnr.offsetWidth, it1.scrollWidth);
+    }
+}
 
-    const width = Math.max(ctnr.offsetWidth, it1.scrollWidth);
+function animate() {
+    const ctnr = container.value;
+    if (!ctnr || cachedWidth === 0) {
+        rafId = requestAnimationFrame(animate);
+        return;
+    }
 
     offset -= speed;
 
-    if (offset <= -width) {
-        offset += width;
+    if (offset <= -cachedWidth) {
+        offset += cachedWidth;
     }
 
     ctnr.style.transform = `translateX(${offset}px)`;
@@ -27,12 +37,19 @@ function animate() {
     rafId = requestAnimationFrame(animate);
 }
 
+let resizeObserver;
+
 onMounted(() => {
+    measureWidth();
     rafId = requestAnimationFrame(animate);
+
+    resizeObserver = new ResizeObserver(measureWidth);
+    resizeObserver.observe(container.value);
 });
 
 onUnmounted(() => {
     cancelAnimationFrame(rafId);
+    resizeObserver?.disconnect();
 });
 </script>
 

nginx/vue/src/components/util/AutoScroll.vue

@@ -16,6 +16,12 @@ let pos = 0;
 let direction = 1; // 1 = down, -1 = up
 let timeoutId;
 let timeoutId2;
+let cachedScrollHeight = 0;
+
+function measureScrollHeight() {
+    const el = container.value;
+    if (el) cachedScrollHeight = el.scrollHeight;
+}
 
 function handleHover() {
     cancelAnimationFrame(timeoutId);
@@ -28,6 +34,10 @@ function handleHover() {
 
 function tick() {
     const el = container.value;
+    if (!el || cachedScrollHeight === 0) {
+        timeoutId = requestAnimationFrame(tick);
+        return;
+    }
 
     const reachedBottom = pos <= 0;
     const reachedTop = pos >= 1;
@@ -46,16 +56,23 @@ function tick() {
 
     pos += direction * SPEED;
 
-    el.scrollTop = pos * el.scrollHeight;
+    el.scrollTop = pos * cachedScrollHeight;
 
     timeoutId = requestAnimationFrame(tick);
 }
 
+let resizeObserver;
+
 onMounted(() => {
+    measureScrollHeight();
     timeoutId = requestAnimationFrame(tick);
+
+    resizeObserver = new ResizeObserver(measureScrollHeight);
+    resizeObserver.observe(container.value);
 });
 
 onBeforeUnmount(() => {
     cancelAnimationFrame(timeoutId);
+    resizeObserver?.disconnect();
 });
 </script>