2장 올림픽 통계 서비스 최적화(1/2) [프론트엔드 성능 최적화 가이드]

프론트엔드 성능 최적화 가이드

지난 시간까지는

FCP, IS, LCP, TTI, TBT

 

이미지를 외부에서 받아와 사용할 때, 크기 조절 하는 것

메모리를 많이 사용하는 코드(함수)를 발견했고, 해당 코드를 최적화한 것

코드 자체를 압축한 내용

 

Lighthouse 패널에서 확인할 수 있는 것

- DIAGNOSIS

- OPPORTUNITY

 

네트워크 패널에서 확인할 수 있는 것

- Disable cache, Fast 3G

 

Performance 패널에서 확인할 수 있는 것

- Performance 탭의 CPU: throttling

- Performance 탭: Memory 체크

---

체크 포인트

1. HTML 파싱으로 DOM 트리 생성, CSS 파싱으로 CSSOM 생성, DOM과 CSSOM으로 렌더트리 생성, 렌더트리로 리플로우, 리페인트, 컴포지트 단계를 거침

 

2. 리플로우와 리페인트를 줄이는 방법

transform, opacity를 활용하기

렌더 트리에는 포함된 상태 = 사용자 눈에는 보이지 않지만, 요소 자체가 없는 것은 아닌상태

별도의 레이아웃으로 분리한 상태(GPU 가속)

 

---

이번 단원에서 다루는 내용

1. CSS 애니메이션 최적화

2. 컴포넌트 지연 로딩

3. 컴포넌트 사전 로딩: 추가 다운로드 하는 시간을 중리기 위해, 첫 화면 진입시에는 다운로드 하지 않지만 해당 코드가 필요한 시점보다 조금 앞서 로드하면 해당 코드를 지연 없이 사용 하는 기법

4. 이미지 사전 로딩: 마찬가지로 필요한 시점보다 조금 앞서 다운로드하고 필요 할 때 바로 보여주는 기법

 

Network 패널

Performance 패널

Webpack Bundle Analyzer

 

https://github.com/performance-lecture/lecture-2 

npm install

npm run start

npm run server

 

1. CSS 애니메이션 최적화

모달을 클릭 → 캐러셀 확인

문제 발생: 캐싱된 데이터로 다시 문제 상황을 볼 수 없음

해결 : Network 패널에서 Disable cache 클릭

현상을 더욱 잘 보려면(느리게): throttling옵션을 Fast 3G로 설정

 

이해하지 못한 부분: 설문 결과에서 애니메이션이 끊기는 느낌을 받지 못함

 

ImageModal 컴포넌트

(1) 외부 라이브러리 사용: react-image-gallery 

(2) 외부 라이브러리에 이미지 데이터를 넘겨 화면에 표시

=> 외부 라이브러리 사용: 해당 라이브러리의 사이즈만큼 최종 번들링된 자바스크립트의 사이즈가 커진다는 것 -> 자바스크립트 다운로드 시간이 증가

 

Bar 컴포넌트(설문 결과 클릭시 바가 움직이는 부분)

styled-components로 구현한 부분

width가 동적으로 조절되는데, <BarGraph width = {props.percent} ... ></BarGraph> 부분에서 percent가 바뀌면 width값이 바뀌며 애니메이션이 일어나게 됨

 

jank: 끊김 현상

60FPS로 화면을 그리지 못한 것으로 유추 가능.

why?

 

HTML 파싱으로 DOM트리 구성, CSS 파싱으로 CSSOM 트리 구성. 이후 DOM과 CSSOM을 합쳐 렌더트리 생성

display:none 은 렌더 트리에 포함되지 않는다.

opacity:0 또는 visibility: hidden은 렌더트리에 속한다.(보이지는 않지만 요소 자체가 없어진 것은 아님)

레이아웃: 요소 배치

페인트: 색 채우기

컴포지트: 여러 개의 레이어들을 하나로 합치는 과정

Performance 탭에서 Parse HTML, Layout, Paint가 순서대로 실행되는 것을 확인할 수 있다.

회색 세로 점선: 브라우저가 화면을 그리는 시점(1초에 최대 60번 그림)

 

리플로우와 리페인트

리플로우: 렌더링의 모든 단계를 재실행하기 때문에 브라우저 리소스를 많이 사용

1. 자바스크립트로 화면 내 어떤 요소의 너비와 높이가 변경됨

2. CSSOM을 새로 생성

3. CSSOM으로 새로운 렌더 트리 생성

4. 레이아웃 단계에서 요소의 크기와 위치를 다시 고려함

5. 페인트

6. 컴포지트

 

리페인트: 리플로우보다는 빠르지만 마찬가지로 리소스를 많이 사용

1. 글자 색 또는 배경 색 변경

2. CSSOM 새로 생성

3. CSSOM으로 새로운 렌더 트리 생성

4. 레이아웃 단계는 실행되지 않는다

5. 페인트

6. 컴포지트

 

리플로우와 리페인트를 피하는 방법: transform, opacity 속성을 이용하기

=> 해당 요소를 별도의 레이어로 분리, 작업을 GPU에 위임하여 처리: 하드웨어 가속

 

하드웨어 가속(GPU 가속)

CPU에서 처리해야 할 작업을 GPU에 위임하여 효율적으로 처리하는 방법