페이지 렌더링 최적화

레이아웃 과정은 각 요소들의 화면 상 실제 위치를 계산하기 때문에 비용이 큽니다.

사용자가 DOM 요소를 추가 수정 하면 위치를 다시 계산해야 하기 때문에 레이아웃이 다시 발생합니다.

따라서 렌더링 최적화의 목표는 레이아웃을 최대한 적고 빠르게 발생시킵니다.

1) 강제 동기식 레이아웃과 레이아웃 쓰레싱 피하기

👀 강제 동기식 레이아웃 : 레이아웃 과정이 끝나기 전에 JS 파일에서 DOM 요소의 위차나 크기값을 변경 후 바로 가져오려고 하면 강제로 레이아웃을 시키는데 이것을 강제 동기식 레이아웃이라고 합니다.

👀 레이아웃 쓰레싱 : 이 동기식 레이아웃을 반복문 내에서 연속적으로 사용하는 것입니다.

2) 상위 DOM 보다 하위 DOM 요소를 사용하기

상위 DOM 요소를 사용하면 하위 DOM 요소에도 영향을 미치기 쉬우므로, 가급적 하위 DOM 요소를 변경하는게 유리합니다.

3) display : none 은 레이아웃이 되지 않는 이점이 있습니다.

4) <> </> 태그를 이용한다.

Document Fragment 인데 메모리상에만 존재하고 DOM 트리 내부에는 존재하지 않은 노드 조각입니다.

5) 시각적인 변화는 setTimeout 보다 requestAnimationFrame이 유리하다.

6) CSS 에 복잡한 셀렉터 규칙 사용하지 않기

CSS 가 복잡하고 많을수록 스타일 계산과 레이아웃 과정이 오래걸립니다.

7) DOM 트리와 style 트리를 복잡하게 구성하지 않기

8) 애니메이션 요소는 position을 고정하기

다른 요소에 영향을 미칠 수 있으므로 position : absolute 나 fixed 로 고정하는 것이 좋습니다.

9) 레이아웃보다는 리페인트를 발생시키는 속성을 활용하자

성능 측정

성능 개선을 하기 위해서는 현재 성능을 측정해야 합니다.

사용자 기준 성능 지표

사용자에게 컨텐츠를 보여지는 시점을 기반으로 4가지로 나뉩니다.

1. First Paint : 화면에 어떤 요소가 페인트된 시점

2. First Contentful Paint : 화면에 이미지나 텍스트가 나타난 시점

3. First Meaningful Paint : 화면에 의미있는 컨텐츠가 나타난 시점

4. Time to Interactive : JS 초기 실행이 완료되고, 사용자가 인터랙션할 수 있는 시점

이 중 Firtst Meaningful Paint가 가장 중요한 지표로 , 성능을 측정합니다.

스켈레톤 UX 활용

유튜브를 보게 되면 로드될 위치에 스켈레톤 UX 를 띄우게 되면 체감 속도를 향상시킬 수 있습니다.