Add requestAnimationFrame batching for pan/zoom updates

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

static/script.js

@@ -1323,6 +1323,16 @@ function updateView() {
   }
 }
 
+let pendingFrame = null;
+function scheduleViewUpdate() {
+    if (!pendingFrame) {
+        pendingFrame = requestAnimationFrame(() => {
+            updateView();
+            pendingFrame = null;
+        });
+    }
+}
+
 function fitToWindow() {
   const r = wrap.getBoundingClientRect();
   scale = Math.min(r.width / imgW, r.height / imgH);
@@ -1919,7 +1929,7 @@ wrap.addEventListener('wheel', e => {
   offX -= mx * (ns - scale);
   offY -= my * (ns - scale);
   scale = ns;
-  updateView();
+  scheduleViewUpdate();
 }, { passive: false });
 
 wrap.addEventListener('mousedown', e => {
@@ -1930,7 +1940,7 @@ window.addEventListener('mousemove', e => {
   if (!dragging) return;
   offX += e.clientX - sx; offY += e.clientY - sy;
   sx = e.clientX; sy = e.clientY;
-  updateView();
+  scheduleViewUpdate();
 });
 window.addEventListener('mouseup', () => {
   dragging = false; wrap.classList.remove('dragging');
@@ -1946,7 +1956,7 @@ wrap.addEventListener('touchmove', e => {
   const t = e.touches[0];
   offX += t.clientX - sx; offY += t.clientY - sy;
   sx = t.clientX; sy = t.clientY;
-  updateView();
+  scheduleViewUpdate();
 });
 wrap.addEventListener('touchend', () => {
   dragging = false;