requestAnimationFrame

setInterval(() => {
  element.style.left = position++ + "px";
}, 16); // 대략 60fps를 노려서 16ms

function animate(timestamp) {
  // timestamp: 콜백이 호출된 시점의 DOMHighResTimeStamp (ms)
  // 여기서 DOM 업데이트 수행

  requestAnimationFrame(animate); // 다음 프레임 예약
}

const id = requestAnimationFrame(animate); // 최초 호출

// 취소
cancelAnimationFrame(id);

Input Events → JavaScript → rAF callbacks → Style → Layout → Paint → Composite → (VSync) → Display

// setInterval: 모니터 주사율과 무관하게 고정 간격
setInterval(render, 16); // 144Hz 모니터에서는 프레임마다 2번씩 호출될 수도

// rAF: 모니터 주사율에 자동 맞춤
function loop() {
  render();
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

let previousTime = null;
const SPEED = 200; // 초당 200px 이동

function animate(timestamp) {
  if (previousTime === null) {
    previousTime = timestamp;
    requestAnimationFrame(animate);
    return;
  }

  const deltaTime = (timestamp - previousTime) / 1000; // 초 단위
  previousTime = timestamp;

  position += SPEED * deltaTime;
  element.style.transform = `translateX(${position}px)`;

  if (position < targetPosition) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

const TARGET_FPS = 30;
const FRAME_DURATION = 1000 / TARGET_FPS; // 약 33.33ms
let lastFrameTime = 0;

function gameLoop(timestamp) {
  requestAnimationFrame(gameLoop);

  const elapsed = timestamp - lastFrameTime;
  if (elapsed < FRAME_DURATION) return;

  // 정확한 타이밍을 위해 나머지를 보정
  lastFrameTime = timestamp - (elapsed % FRAME_DURATION);

  // 실제 업데이트 로직
  update();
  render();
}

requestAnimationFrame(gameLoop);

let ticking = false;

function onScroll() {
  if (!ticking) {
    requestAnimationFrame(() => {
      // DOM 업데이트는 여기서
      header.style.transform = `translateY(${-window.scrollY * 0.5}px)`;
      ticking = false;
    });
    ticking = true;
  }
}

window.addEventListener("scroll", onScroll, { passive: true });

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const particles = [];
let animationId = null;

function update(deltaTime) {
  for (const p of particles) {
    p.x += p.vx * deltaTime;
    p.y += p.vy * deltaTime;
    p.vy += 980 * deltaTime; // 중력 가속도 (px/s²)

    // 바닥 충돌
    if (p.y > canvas.height) {
      p.y = canvas.height;
      p.vy *= -0.7; // 반발 계수
    }
  }
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (const p of particles) {
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
    ctx.fillStyle = p.color;
    ctx.fill();
  }
}

let prevTime = null;

function loop(timestamp) {
  if (prevTime === null) prevTime = timestamp;
  const dt = Math.min((timestamp - prevTime) / 1000, 0.1); // 최대 100ms 클램프
  prevTime = timestamp;

  update(dt);
  draw();

  animationId = requestAnimationFrame(loop);
}

// 시작
animationId = requestAnimationFrame(loop);

// 정지
function stop() {
  cancelAnimationFrame(animationId);
  animationId = null;
  prevTime = null;
}

import { useRef, useEffect, useCallback } from "react";

function useAnimationFrame(callback) {
  const requestRef = useRef(null);
  const previousTimeRef = useRef(null);
  const callbackRef = useRef(callback);

  // 콜백을 ref로 관리하면 의존성 배열에서 자유로워짐
  callbackRef.current = callback;

  useEffect(() => {
    function animate(timestamp) {
      if (previousTimeRef.current !== null) {
        const deltaTime = timestamp - previousTimeRef.current;
        callbackRef.current(deltaTime);
      }
      previousTimeRef.current = timestamp;
      requestRef.current = requestAnimationFrame(animate);
    }

    requestRef.current = requestAnimationFrame(animate);

    return () => {
      cancelAnimationFrame(requestRef.current);
    };
  }, []);
}

// 사용
function AnimatedCounter() {
  const [count, setCount] = useState(0);

  useAnimationFrame((deltaTime) => {
    setCount((prev) => prev + deltaTime * 0.01);
  });

  return <div>{Math.round(count)}</div>;
}

// rAF: 반드시 다음 프레임에 실행
requestAnimationFrame(() => {
  updateAnimation(); // 시각적 업데이트, 매 프레임 필수
});

// rIC: 브라우저가 한가할 때
requestIdleCallback(
  (deadline) => {
    while (deadline.timeRemaining() > 0 && tasks.length > 0) {
      processTask(tasks.pop()); // 비긴급 작업
    }
  },
  { timeout: 2000 } // 최대 2초 안에는 실행해줘
);

// ❌ 한 프레임에 10만 개 파티클 계산 + 렌더링
function animate(timestamp) {
  for (let i = 0; i < 100000; i++) {
    updateParticle(particles[i]); // 프레임 드롭 확정
  }
  requestAnimationFrame(animate);
}

// ✅ 청크로 나눠서 처리
const CHUNK_SIZE = 5000;
let currentIndex = 0;

function animate(timestamp) {
  const end = Math.min(currentIndex + CHUNK_SIZE, particles.length);
  for (let i = currentIndex; i < end; i++) {
    updateParticle(particles[i]);
  }
  currentIndex = end >= particles.length ? 0 : end;
  draw();
  requestAnimationFrame(animate);
}

// ❌ 강제 동기 레이아웃 (layout thrashing)
requestAnimationFrame(() => {
  const height = element.offsetHeight; // 읽기 → 레이아웃 강제 계산
  element.style.height = height * 2 + "px"; // 쓰기
  const width = element.offsetWidth; // 읽기 → 또 레이아웃 강제 계산
  element.style.width = width * 2 + "px"; // 쓰기
});

// ✅ 읽기 먼저, 쓰기 나중에
requestAnimationFrame(() => {
  // 읽기 단계
  const height = element.offsetHeight;
  const width = element.offsetWidth;

  // 쓰기 단계
  element.style.height = height * 2 + "px";
  element.style.width = width * 2 + "px";
});

// ✅ 콜백 시작 부분에서 다음 프레임 예약
function animate(timestamp) {
  requestAnimationFrame(animate); // 먼저 예약
  update(timestamp); // 에러가 나도 다음 프레임은 예약됨
}

// ⚠️ 콜백 끝에서 예약하면 에러 시 루프 중단
function animate(timestamp) {
  update(timestamp); // 여기서 에러 나면
  requestAnimationFrame(animate); // 이 줄 실행 안 됨 → 루프 멈춤
}