📚 Reference

• 공식 문서 1
• 참고 자료 1
• 참고 자료 2
• 참고 자료 3
• 참고 자료 4
• 참고 자료 5
• 참고 자료 6
• 참고 자료 7
• 참고 자료 8
• 참고 영상 1
• 참고 영상 2

📜 ****Chapter

Coding 방법론

CLS (Cumulative Layout Shift)

FCP (First Contentful Paint)

FID (First Input Delay)

INP (Interaction to Next Paint)

Jank

LCP (Largest Contentful Paint)

List virtualization

TBT (Total Blocking Time)

웹 프론트 속도 개선을 위한 필수 도구

웹 폰트 최적화

이미지 최적화

‣

‣

‣

‣

‣

‣

‣

‣

‣

‣

‣

Front-end 성능 최적화

• 성능 최적화는 단순히 코드를 줄이는 것을 넘어, 사용자가 체감하는 속도(User Perceived Performance)를 개선하는 과정이다.
• 크게 로딩 속도 최적화, 렌더링 성능 최적화, 그리고 네트워크 최적화로 나눌 수 있다.
• Front-end 성능 최적화 = 로딩 최적화 + 렌더링 최적화
  • 로딩 최적화: 리소스를 어떻게 최적화 해서 로딩 성능을 빠르게 하는지.
  • 렌더링 최적화: 렌더링을 어떻게 최적화 해야 부드러워지는지.

1. 로딩 최적화

• 브라우저 기준 최적화의 문제점
• 사용자 기준 최적화
• 프리 렌더러
• PWA 사례

2. 렌더링 최적화

• 레이아웃 스레싱 (Layout Thrashing)

  • 웹 개발에서 JavaScript가 DOM(Document Object Model)의 스타일을 변경한 후, 바로 이어서 해당 요소의 레이아웃 정보를 읽으려고 할 때 발생하는 성능 저하 현상이다.
  • 브라우저가 렌더링을 여러 번 강제로 다시 계산하게 만들어 웹 페이지가 느려지는 현상이다.
  • 이는 마치 CPU가 실제 작업을 하기보다 페이지 교체(스레싱)에 시간을 더 쓰는 것과 유사하며, 렌더링 성능을 최적화하려면 이 현상을 피하고 배치 처리해야 한다.

• 가상돔

• 웹 워커

• 비쥬얼스튜디오 코드, 아톰: 프론트엔드 기술로 만들고 있다.