[250630] TIL

Today I Learned (2025-06-30)

인프런 웹 최적화 PART 1 강의 듣기

코드 스플리팅이란 ?

  • 코드를 분할하는 것
  • 불필요한 코드, 중복되는 코드가 없이 적절한 사이즈의 코드가 적절한 타이밍에 로드 될 수 있도록 하는 것

텍스트 압축

말 그대로 텍스트 압축해서 올려주면 다운로드 되는 사이즈가 작아져서 빨라짐

압축 알고리즘

  1. GZIP
  • 내부적으로 Deflate를 사용하는 파일 포맷
  • Deflate만 단독으로 사용하는 것보다 더 압축률이 높음
  • 블럭, 헤더와 체크성 ?
  1. Deflate
  • LZ77 알고리즘이랑 퍼포머 코딩 알고리즘을 이용하는 인기있는 압축 알고리즘

클라이언트가 아닌 번들파일을 서비스해주는 서버 옵션을 살펴 봐야함

네트워크 탭에서 헤더에서 gzip 으로 인코딩 된 걸 확인 할 수 있다. 너무 작은 사이즈는 압축하고 푸는데 시간이 더 걸리기 때문에 안함

애니메이션 최적화 (Reflow, Repaint)

Reflow

  • width, height 변경
  • 돔 쏨 > 렌더트리 > 레이아웃 > 페인트 > 컴포지트까지 모두 재실행

Repaint

  • color , background-color 변경
  • 돔 쏨 > 렌더트리 > 레이아웃 > 페인트 > 컴포지트까지 레이아웃 건너뜀

  • transform, opacity 를 이용하면 Reflow, Repaint를 피할 수 있다.

Categories:

Updated:

Leave a comment