CPU 아키텍처와 성능 최적화

개념 설명

CPU의 파이프라이닝과 캐시 메모리 구조를 이해하여 프론트엔드 성능 최적화에 활용하는 저수준 최적화 원리.

핵심 포인트

• 파이프라이닝: 명령어를 단계별로 병렬 처리하여 처리량 증가
• 시간적 지역성: 최근 사용된 데이터는 다시 사용될 가능성 높음 (memoization 활용)
• 공간적 지역성: 인접한 데이터들은 함께 사용될 가능성 높음 (번들링 최적화)
• 캐시 미스 비용: L1 캐시 접근 1사이클, 메모리 접근 100-300사이클

예시 코드

// 시간적 지역성 활용: 메모이제이션
const MemoizedComponent = React.memo(({ data }) => {
  const expensiveValue = useMemo(() => {
    return data.reduce((sum, item) => sum + item.value, 0);
  }, [data]);
  
  return <div>{expensiveValue}</div>;
});