📚 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

Prefetching

Reflow / Re-layout

TBT (Total Blocking Time)

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

웹 폰트 최적화

이미지 최적화

‣

‣

‣

‣

‣

‣

‣

‣

‣

‣

‣

Front-end 성능 최적화

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

1. 로딩 최적화

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

2. 렌더링 최적화

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

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

• 가상돔

• 웹 워커

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