[FE] 브라우저 렌더링 과정

🗣️ 브라우저의 렌더링 과정에 대해서 설명해주세요.

• 의도: 단순히 자바스크립트, 리액트 등의 코딩 기술이 아니라 전반적인 프론트엔드 지식을 가지고 있는지 확인하는 질문

• 팁: 순서에 관련한 질문이기에 제스처 등 비언어적 표현으로 보조하는 것도 좋다.

• 나의 답안

  브라우저의 렌더링 과정을 간단히 요약하면, HTML과 CSS 파싱 -> DOM 트리와 CSSOM 트리 결합 -> 레이아웃 계산 -> 페인팅 단계로 이루어집니다.

  브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다.
  브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고, 이들을 결합하여 렌더 트리를 생성합니다.
  브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree, 추상 구문 트리)를 생성하고 바이트 코드로 변환하여 실행합니다.
  이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있습니다.
  변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됩니다.
  렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML 요소를 페인팅합니다.

• 제공된 답안 (모범 답안)

  브라우저의 렌더링 과정은 크게 HTML 파싱 -> CSS 파싱 -> DOM 트리와 CSSOM 트리 결합 -> 레이아웃 계산 -> 페인팅 단계로 이루어집니다.

  HTML을 파싱해 DOM 트리를 만들고, 비슷하게 CSS를 파싱해 CSSOM 트리를 만듭니다.
  이후에 두 트리를 결합하고 페이지에 렌더링하기 위해 필요한 공간을 계산합니다.
  마지막으로 레이아웃에 따라 화면에 요소를 페인팅합니다.

---

📝 개념 정리

• 브라우저의 렌더링 과정은 웹 페이지를 사용자에게 보여주는 과정으로, 다음과 같은 주요 단계로 이루어져 있다.

🌟 브라우저의 렌더링 과정

1. 리소스 요청

   • 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다.

2. HTML 파싱 및 DOM 트리 구축

   • 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML 문서를 네트워크에서 가져온 후, HTML 파서를 사용해 문서를 읽고 DOM(Document Object Model) 트리를 생성한다.
   • HTML 태그들은 노드로 변환되며, 이 노드들은 계층 구조를 이룬다.

3. CSS 파싱 및 스타일 계산

   • 브라우저의 렌더링 엔진은 서버로부터 응답된 CSS 파일을 네트워크에서 가져온 후, CSS 파서를 사용해 이를 파싱한다.
   • CSSOM(CSS Object Model) 트리를 생성하고, 이를 DOM 트리와 결합해 각 요소에 적용될 스타일을 계산한다.

4. 렌더 트리 생성

   • DOM 트리와 CSSOM 트리를 바탕으로 렌더 트리를 생성한다.
   • 렌더 트리는 시각적으로 표시될 요소들만 포함하며, 각 요소의 스타일 정보도 포함된다.
   • 예를 들어, display: none 스타일이 적용된 요소는 렌더 트리에 포함되지 않는다.

5. 레이아웃 (Reflow)

   • 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산한다.
   • 브라우저는 뷰포트 내에서 요소들이 어떻게 배치될지 계산하고, 이를 통해 요소들의 정확한 위치와 크기를 결정한다.

6. 페인팅 (Painting)

   • 레이아웃 단계에서 계산된 정보를 바탕으로 화면에 픽셀을 칠한다.
   • 이 과정은 각 요소를 텍스처로 변환하고, 텍스처를 합성해 최종적으로 화면에 출력한다.

7. 합성 및 렌더링 (Compositing)

   • 페이지의 일부 요소들은 별도의 레이어로 처리될 수 있다.
   • 레이어들은 개별적으로 페인팅된 후, 합성 단계에서 합쳐져 최종 이미지를 만든다.
   • 이를 통해 복잡한 애니메이션이나 변환(예: CSS 트랜스폼)을 효율적으로 처리할 수 있다.

• 위 과정이 빠르고 효율적으로 이루어져야 웹 페이지가 사용자에게 신속하게 표시된다.

• 브라우저는 이러한 렌더링 과정을 최적화하기 위해 다양한 기술과 전략을 사용한다.

---

🌟 렌더링 과정을 최적화하기 위한 다양한 기술/전략

1. 레이아웃 및 렌더링 최적화

   • 레이아웃 쓰로틀링 (layout throttling)
     • 레이아웃 계산을 필요 이상으로 자주 하지 않도록 조정한다.
     • 브라우저는 여러 레이아웃 요청을 모아 한 번에 처리한다.
   • 온디맨드 레이아웃 (on-demand layout)
     • 필요한 요소들만 레이아웃을 계산하도록 한다.
     • 변경된 요소와 그 자식 요소들만 다시 게산한다.
   • 페인트 쓰로틀링 (paint throttling)
     • 페인팅 작업을 최소화하기 위해 불필요한 페인팅을 피하고, 페인팅 작업을 배치한다.

2. 합성 및 레이어 최적화

   • 레이어 생성
     • 특정 요소(예: 애니메이션 요소)를 별도의 레이어로 만들어 합성한다.
     • 이렇게 하면 변경된 레이어만 다시 그리면 되므로 전체 페이지의 리렌더링을 줄일 수 있다.
   • 합성 스레드
     • 렌더링을 주 스레드와 분리하여 합성 전용 스레드에서 처리한다.
     • 이렇게 하면 주 스레드가 바쁠 때도 렌더링이 부드럽게 진행될 수 있다.
   • GPU 가속
     • GPU를 사용하여 레이어 합성 및 애니메이션을 처리한다.
     • 이를 통해 복잡한 그래픽 작업을 더 효율적으로 처리할 수 있다.

3. 네트워크 최적화

   • HTTP/2
     • HTTP/2 프로토콜을 사용하여 여러 리소스를 병렬로 다운로드한다.
     • 이를 통해 페이지 로딩 속도를 향상시킨다.
   • 리소스 프리페칭
     • 필요한 리소스를 미리 가져오는 기술이다.
     • 브라우저가 다음에 필요할 리소스를 예측하고 미리 다운로드하여 로딩 시간을 줄인다.
   • 리소스 압축
     • 텍스트 기반 리소스(HTML, CSS, JavaScript)를 Gzip이나 Brotli로 압축하여 다운로드 시간을 단축한다.

4. 코드 및 데이터 최적화

   • 코드 스플리팅
     • JavaScript 코드를 여러 청크로 나누어 필요한 시점에 로드한다.
     • 이를 통해 초기 로딩 시간을 줄일 수 있다.
   • 트리 쉐이킹
     • 사용하지 않는 코드(데드 코드)를 제거하여 JavaScript 파일의 크기를 줄인다.
   • 지연 로딩
     • 이미지나 비디오 같은 리소스를 사용자가 필요로 할 때 로드한다.
     • 예를 들어, 스크롤될 때 이미지를 로딩하는 방식이다.

5. 브라우저 캐시 최적화

   • 캐싱 정책
     • 리소스를 효율적으로 캐싱하여 재사용할 수 있도록 한다.
     • 캐시 컨트롤 헤더를 설정하여 리소스가 만료되지 않았다면 다시 다운로드하지 않도록 한다.
   • 서비스 워커
     • 웹 애플리케이션이 오프라인에서도 동작하도록 하고, 캐시를 더 세밀하게 관리할 수 있게 한다.

6. DOM 및 스타일 최적화

   • 효율적인 DOM 조작
     • DOM 조작을 최소화하고, 배치 작업을 모아서 수행하여 성능을 향상시킨다.
   • 스타일 계산 최적화
     • 스타일 변경을 최소화하고, CSS 셀렉터를 간결하게 유지하여 스타일 계산을 빠르게 한다.

• 이러한 최적화 기술과 전략들은 브라우저가 웹 페이지를 빠르고 효율적으로 렌더링할 수 있도록 도와준다.

• 이를 통해 사용자 경험을 향상시키고, 웹 페이지의 로딩 속도와 반응성을 개선한다.