[250630] TIL
Today I Learned (2025-06-30)
인프런 웹 최적화 PART 1 강의 듣기
코드 스플리팅이란 ?
- 코드를 분할하는 것
- 불필요한 코드, 중복되는 코드가 없이 적절한 사이즈의 코드가 적절한 타이밍에 로드 될 수 있도록 하는 것
텍스트 압축
말 그대로 텍스트 압축해서 올려주면 다운로드 되는 사이즈가 작아져서 빨라짐
압축 알고리즘
- GZIP
- 내부적으로 Deflate를 사용하는 파일 포맷
- Deflate만 단독으로 사용하는 것보다 더 압축률이 높음
- 블럭, 헤더와 체크성 ?
- Deflate
- LZ77 알고리즘이랑 퍼포머 코딩 알고리즘을 이용하는 인기있는 압축 알고리즘
클라이언트가 아닌 번들파일을 서비스해주는 서버 옵션을 살펴 봐야함
네트워크 탭에서 헤더에서 gzip 으로 인코딩 된 걸 확인 할 수 있다. 너무 작은 사이즈는 압축하고 푸는데 시간이 더 걸리기 때문에 안함
애니메이션 최적화 (Reflow, Repaint)
Reflow
- width, height 변경
- 돔 쏨 > 렌더트리 > 레이아웃 > 페인트 > 컴포지트까지 모두 재실행
Repaint
- color , background-color 변경
-
돔 쏨 > 렌더트리 >
레이아웃> 페인트 > 컴포지트까지 레이아웃 건너뜀 - transform, opacity 를 이용하면 Reflow, Repaint를 피할 수 있다.
Leave a comment