Function monitorScrollFps

web/lib/performance/metrics.ts:147–176

(element: HTMLElement)

/** Monitor scroll FPS during user scrolling. Returns a cleanup fn. */
export function monitorScrollFps(element: HTMLElement): () => void {
  let frameCount = 0;
  let lastTime = performance.now();
  let rafId: number;
  let scrolling = false;

  const onScroll = () => { scrolling = true; };

  const loop = () => {
    rafId = requestAnimationFrame(loop);
    if (!scrolling) return;
    frameCount++;
    const now = performance.now();
    if (now - lastTime >= 1000) {
      const fps = (frameCount / (now - lastTime)) * 1000;
      report({ name: "scroll_fps", value: fps, rating: fps >= 55 ? "good" : fps >= 30 ? "needs-improvement" : "poor" });
      frameCount = 0;
      lastTime = now;
      scrolling = false;
    }
  };

  element.addEventListener("scroll", onScroll, { passive: true });
  rafId = requestAnimationFrame(loop);

  return () => {
    cancelAnimationFrame(rafId);
    element.removeEventListener("scroll", onScroll);
  };
}