OMG WORLD

Appearance

rendering ​

DOM은 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고있어요.

CRP ​

CRP의 주요 단계 ​

INFO

💡 CRP (Critical Rendering Path)는 웹 브라우저가 HTML, CSS, 및 JavaScript와 같은 웹 페이지의 리소스를 받아서 실제로 화면에 페이지를 표시하는 과정을 의미해요. (이 과정은 웹 페이지의 로딩 시간과 성능에 중요한 영향을 미치므로 최적화하는 것이 중요해요!)

  1. 브라우저가 사용자가 요청한 주소를 방문해 htlm 파일 다운로드
  2. 브라우저의 렌더링 엔진은 HTML을 파싱해 Dom 노드로 구성된 트리(DOM)를 만들어요
  3. '2번'과정에서 css파일을 만나면 해당 cssvkdlfeh ekdnsfhemgksek.
  4. 브라우저의 렌더링 엔진은 이 css도 파싱해 css노드로 구성된 트리(CSSOM)를 만들어요
  5. 브라우저는 2번에서 만든 DOM노드를 순화하는데 여기서 모든 노드를 방문하는 것이 아니고 사용자 눈에 보이는 노드만 방문해요. 즉 display none과 같이 사용자 화면에 보이지 않는 요소는 방문해 작업하지 않아요. 이는 트리를 분석하는 과정을 조금이라도 빠르게 하기 위해서에요.
  6. '5번'에서 제외된 눈에 보이는 노드를 대상으로 해당 노드에 대한 CSSOM 정보를 찾고 여기서 발견한 CSS 스타일 정보를 이 노드에 적용해요.이 DOM노드에 CSS를 적용하는 과정은 크게 두가지로 나눌 수 있어요.
    • 레이아웃: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정이에요. 이 레이아웃 과정을 거치면 반드시 페인팅 과정도 거치게 되어요.
    • 페인팅: 레이아웃 단계를 거친 노드에 색과 같은 실제 유효한 모습을 그리는 과정이에요.

이렇게 모든 단계를 거친 최종 출력물은 웹 애플리케이션의 모든 콘텐츠와 스타일 정보를 가지게 되어요.

최적화 기법 ​

CRP 최적화의 목적은 가능한 한 빠르게 웹 페이지를 렌더링하게 하는 것이에요. 몇몇 전략적인 최적화 기법들은 다음과 같아요.

  • CSS와 JavaScript의 최소화 및 압축
    • 파일의 크기를 줄여 빠른 로딩을 도와주어요.
  • 인라인 CSS와 JavaScript의 사용 최소화
    • 중요하지 않은 스타일이나 스크립트를 외부 파일로 분리하여 초기 렌더링을 가속화해요.
  • 비동기 스크립트 로딩
    • async나 defer 속성을 사용하여 JavaScript의 실행을 지연시킴으로써 블로킹을 방지해요.
  • 중요한 CSS를 위쪽에 위치시키기
    • 페이지의 위쪽 부분을 빠르게 렌더링하려면 중요한 스타일을 HTML 문서의 상단에 위치시켜야 해요.
  • 웹 폰트 최적화
    • 웹 폰트의 로딩 지연을 방지하기 위해 필요한 스타일만 불러오거나, font-display 옵션을 사용해요.

CRP 최적화는 웹 성능 향상과 사용자 경험 향상에 큰 영향을 미치므로 중요해요.

React 렌더링 ​

React에서 렌더링은 컴포넌트가 UI를 구성하기 위해 JSX를 HTML로 변환하고 이를 브라우저에 반영하는 과정이에요. React의 렌더링 방식은 Virtual DOM 을 활용한 효율적인 UI 업데이트에 초점이 맞춰져 있습니다.

React의 렌더링 과정 ​

  1. 상태(state)나 props 변경 감지 React는 컴포넌트의 state 또는 props 가 변경되면 자동으로 렌더링을 트리거해요

  2. Virtual DOM 비교 변경된 컴포넌트의 새로운 Virtual DOM을 생성하고, 기존 가상돔과 비교하여 변경 사항을 찾아요.

  3. DOM 업데이트 변경된 부분만 실제 DOM에 적용하여 최소한의 연산으로 성능을 최적화합니다.

. React 렌더링이 CRP에 미치는 영향 ​

React는 Virtual DOM을 활용하여 변경된 부분만 반영하지만, 여전히 JS 실행 시간이 길어질 경우 CRP에 영향을 미칠 수 있어요. React 앱이 무거운 경우, 브라우저의 JS 실행 시간이 늘어나 First Contentful Paint(FCP) 나 Largest Contentful Paint(LCP) 와 같은 성능 지표가 저하될 수 있습니다.

특히, 클라이언트 사이드 렌더링(CSR)만 사용할 경우 JS가 실행될 때까지 화면이 빈 상태일 수 있습니다.

React 성능 최적화와 CRP 개선 ​

  • 초기 HTML을 서버에서 렌더링하여 클라이언트에서 빠르게 화면을 표시할 수 있도록 SSR을 사용해요
  • React lazy , Suspense를 사용하여 불필요한 Js로딩을 줄여요.
  • WebP 등의 이미지 포맷을 사용하여 용량을 최적화해요
  • 폰트 로딩을 최적화해요.
  • 불필요한 재렌더링을 방지하여 렌더링 속도를 향상 시켜요