웹 페이지 렌더링 최적화

자바스크립트의 실행시간 = 렌더링 성능

• 렌더링 성능 = 자바스크립트 실행 시간 + 자바스크립트 인한 DOM, CSS 변경

레이아웃 최적화

레이아웃 : DOM 요소들이 화면에 어느 위치에 어떤 크기로 배치될 지 결정하는 계산 과정

📌 레이아웃을 최대한 적게하고 리페인트만 할 수 있도록

자바스크립트 실행 최적화

강제 동기 레이아웃 최적화

원래 레이아웃은 비동기이나 특정 상황에서 동기적으로 레이아웃 발생

• offsetHeight, offsetTop과 같은 계산된 값을 읽을 때

레이아웃 스래싱 (thrashing) 피하기

1. 레이아웃 스래싱 = 한 프레임 내에서 강제 동기 레이아웃이 연속적으로 발생

   • 반복문 안에서 offsetWidth 사용

2. 가능한 하위 노드의 DOM을 조작하고 스타일 변경

3. 영향받는 엘리먼트 제한

   • 부모-자식 관계 : 부모 엘리먼트의 높이가 가변적인 상태에서 자식의 높이 변경 => 부모부터 재레이아웃 발생
     - ✳️ 부모 엘리먼트의 높이 지정해주기
   • 같은 위치에 있는 엘리먼트 : 여러 개의 엘리먼트가 inline으로 위치
     -> 하나의 width값이 변경
     -> 옆에 있는 element가 밀리면서 재레이아웃 발생
   • 숨겨진 element 수정 :
     - display : none -> 레이아웃 / 리페인드 ❌
     - visibility : hidden -> 공간을 차지하기 때문에 레이아웃 ⭕️ 리페인트 ❌
     

HTML, CSS 최적화

트리 변경하면 렌더링을 유발
트리가 클수록 더 많은 계산 필요

• CSS 규칙 수 최소화
• DOM 깊이 최소화

애니메이션 최적화

한 프레임 처리가 16ms(60fps)로 완료
(자바스크립트 실행 시간 10ms)

requestAnimationFrame()

브라우저의 프레임속도에 맞춰 애니메이션 실행이 가능하도록 해줌.

setinterval, settimeout과 달리 프레임 시작시 호출

페이지에 보이지 않을 땐 콜백 함수 실행x

CSS animation 사용

• position : absolute 처리
  -> 주변에 영향을 주지 않게

• transform 사용
  -> 레이어로 분리돼 영향받는 엘리먼트가 제한되어 레이아웃과 페인트 감소 & 합성(composite)만 발생 => 렌더링 속도 증가