requestAnimationFrame으로 웹 애플리케이션 성능 최적화하기

// 일반적인 스크롤 이벤트 처리 (성능 이슈 발생 가능성!)
window.addEventListener('scroll', function () {
  // DOM 요소들 업데이트
  const scrollPosition = window.scrollY
  const parallaxElements = document.querySelectorAll('.parallax')

  parallaxElements.forEach((element) => {
    // 위치 계산
    const speed = element.dataset.speed || 0.5
    const yPos = -(scrollPosition * Number(speed))

    // 스타일 적용 - 매 스크롤 이벤트마다 실행됨
    element.style.transform = `translate3d(0, ${yPos}px, 0)`
  })
})

// requestAnimationFrame으로 최적화한 스크롤 이벤트 처리
let ticking = false
let scrollPosition = 0

window.addEventListener('scroll', function () {
  // 현재 스크롤 위치 저장
  scrollPosition = window.scrollY

  // 애니메이션 프레임이 예약되어 있지 않은 경우에만 요청
  if (!ticking) {
    requestAnimationFrame(() => {
      updateElements(scrollPosition)
      ticking = false
    })

    ticking = true
  }
})

function updateElements(scrollPos) {
  const parallaxElements = document.querySelectorAll('.parallax')

  parallaxElements.forEach((element) => {
    const speed = element.dataset.speed || 0.5
    const yPos = -(scrollPos * Number(speed)) // Number()로 명시적 형변환
    // 브라우저 렌더링 사이클에 맞춰 한 번만 실행
    element.style.transform = `translate3d(0, ${yPos}px, 0)`
  })
}

// setInterval을 사용한 일반적인 차트 애니메이션
function animateChart(chartElement, targetValues) {
  let currentValues = Array(targetValues.length).fill(0)
  const duration = 1000 // 1초
  const fps = 60
  const frames = (duration / 1000) * fps
  let frame = 0

  const interval = setInterval(() => {
    frame++

    // 각 값 업데이트
    for (let i = 0; i < currentValues.length; i++) {
      currentValues[i] = easeOutCubic(frame, 0, targetValues[i], frames)
    }

    // DOM 업데이트 (updateChartBars 함수는 차트의 막대를 실제로 그리는 함수라고 가정)
    updateChartBars(chartElement, currentValues)

    if (frame >= frames) {
      clearInterval(interval)
    }
  }, 1000 / fps)
}

function easeOutCubic(t, b, c, d) {
  // t: current time, b: beginning value, c: change in value, d: duration
  return c * ((t = t / d - 1) * t * t + 1) + b
}
// 예시: function updateChartBars(element, values) { /* ... */ })

// requestAnimationFrame을 사용한 차트 애니메이션
function animateChartOptimized(chartElement, targetValues) {
  const startValues = Array(targetValues.length).fill(0)
  const startTime = performance.now()
  const duration = 1000 // 1초

  function animationStep(currentTime) {
    // 경과 시간 계산
    const elapsedTime = currentTime - startTime
    const progress = Math.min(elapsedTime / duration, 1)
    // easing 함수는 동일하게 사용 (progress가 0에서 1 사이 값이므로, b=0, c=1, d=1로 적용)
    const easedProgress = easeOutCubic(progress * duration, 0, 1, duration)

    // 현재 값 계산
    const currentValues = startValues.map(
      (startVal, i) => startVal + (targetValues[i] - startVal) * easedProgress
    )

    // DOM 업데이트
    updateChartBars(chartElement, currentValues)

    // 애니메이션이 완료되지 않았으면 다음 프레임 요청
    if (progress < 1) {
      requestAnimationFrame(animationStep)
    }
  }

  // 첫 프레임 요청
  requestAnimationFrame(animationStep)
}

// easing 함수는 이전과 동일
// function easeOutCubic(t, b, c, d) { ... }
// updateChartBars 함수는 차트의 막대(bar)를 실제로 그리는 함수라고 가정합니다.
// (예: function updateChartBars(element, values) { /* ... */ })

// 읽기/쓰기 작업을 분리해서 레이아웃 스래싱을 방지하는 예시
class AnimationOptimizer {
  constructor() {
    this.readTasks = []
    this.writeTasks = []
    this.scheduled = false
  }

  // DOM 읽기 작업을 예약합니다.
  read(readFn) {
    this.readTasks.push(readFn)
    this.scheduleProcessing()
    return this
  }

  // DOM 쓰기 작업을 예약합니다.
  write(writeFn) {
    this.writeTasks.push(writeFn)
    this.scheduleProcessing()
    return this
  }

  // 실제 작업을 requestAnimationFrame으로 스케줄링합니다.
  scheduleProcessing() {
    if (!this.scheduled) {
      this.scheduled = true
      // bind(this)를 통해 processTaskQueue 내부의 this가 AnimationOptimizer 인스턴스를 가리키도록 합니다.
      requestAnimationFrame(this.processTaskQueue.bind(this))
    }
  }

  processTaskQueue() {
    // 1. 모든 읽기 작업을 먼저 실행합니다.
    // 이 단계에서 DOM 변경을 유발하는 작업은 피해야 합니다.
    const readResults = this.readTasks.map((readFn) => readFn())

    // 2. 그 다음 모든 쓰기 작업을 실행합니다. (필요하다면 읽기 결과를 활용)
    // 이 단계에서 DOM의 값을 읽는 작업은 피해야 합니다.
    this.writeTasks.forEach((writeFn, i) => writeFn(readResults[i]))

    // 작업 큐를 비우고 다음 프레임을 준비합니다.
    this.readTasks = []
    this.writeTasks = []
    this.scheduled = false
  }
}

// 사용 예
const animator = new AnimationOptimizer()
window.addEventListener('scroll', () => {
  animator
    .read(() => window.scrollY) // 스크롤 위치 읽기
    .write((scrollY) => updateParallaxElements(scrollY)) // 읽은 값으로 DOM 업데이트
})
// updateParallaxElements 함수는 스크롤 위치에 따라 여러 요소의 스타일을 변경하는 함수라고 가정합니다.
// (예: function updateParallaxElements(scrollY) { /* ...여러 요소 스타일 변경... */ })