웹 성능 최적화(3) : 웹 페이지 렌더링 최적화

deli-ght·7일 전
1

CS

목록 보기
9/9
post-thumbnail

웹 페이지 렌더링 최적화

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

  • 렌더링 성능 = 자바스크립트 실행 시간 + 자바스크립트 인한 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)만 발생 => 렌더링 속도 증가

profile
PRE-FE에서 PRO-FE로🚀🪐!

4개의 댓글

comment-user-thumbnail
6일 전

배워갑니다

1개의 답글
comment-user-thumbnail
5일 전

배워갑니다

1개의 답글