Browser Rendering Process

[Largopie]

기본 개념 질문

• 브라우저 렌더링 과정의 주요 단계를 순서대로 설명해주세요.
• Critical Rendering Path란 무엇이며, 왜 중요한가요?
• DOM(Document Object Model)과 CSSOM(CSS Object Model)이 무엇이고 어떻게 생성되나요?

렌더링 과정 세부 질문

• 파싱(Parsing) 과정에서 HTML과 CSS는 각각 어떻게 처리되나요?
• 렌더 트리(Render Tree)란 무엇이며, 어떻게 구성되나요?
• 레이아웃(Layout) 단계와 페인트(Paint) 단계의 차이점은 무엇인가요?

최적화 관련 질문

• 렌더링 성능을 최적화하기 위한 방법들에 대해 설명해주세요.
• 리플로우(Reflow)와 리페인트(Repaint)가 무엇이며, 어떻게 최소화할 수 있나요?
• 브라우저의 렌더링 최적화 기법 중 GPU 가속이 어떻게 작동하는지 설명해주세요.

JavaScript와 렌더링 관련 질문

• JavaScript가 브라우저 렌더링 과정에 어떤 영향을 미치나요?
• 'DOMContentLoaded'와 'load' 이벤트의 차이점은 무엇인가요?
• async와 defer 스크립트의 차이점과 각각의 사용 사례에 대해 설명해주세요.

최신 기술 및 트렌드 질문

• 가상 DOM(Virtual DOM)이 무엇이며, 브라우저 렌더링과 어떤 관계가 있나요?
• 웹 컴포넌트(Web Components)가 브라우저 렌더링에 어떤 영향을 미치나요?
• 프로그레시브 렌더링(Progressive Rendering)이란 무엇이며, 어떤 이점이 있나요?

브라우저 간 차이점 질문

• 다양한 브라우저 엔진(예: Blink, Gecko, WebKit)간의 렌더링 과정 차이에 대해 아는 대로 설명해주세요.
• 크로스 브라우징 이슈를 해결할 때 렌더링 과정의 이해가 어떻게 도움이 되나요?

성능 측정 및 도구 관련 질문

• 브라우저의 개발자 도구를 사용하여 렌더링 성능을 분석하는 방법에 대해 설명해주세요.
• Lighthouse 등의 성능 측정 도구가 어떤 렌더링 관련 지표를 제공하는지 설명해주세요.

실제 상황 기반 질문

• 대규모 웹 애플리케이션에서 렌더링 성능 문제를 경험한 적이 있나요? 어떻게 해결했나요?
• 싱글 페이지 애플리케이션(SPA)에서의 렌더링 최적화 전략에 대해 설명해주세요.
• 이미지가 많은 웹페이지의 렌더링 성능을 개선하기 위해 어떤 방법을 사용할 수 있나요?

[Largopie]

기본 개념 질문

브라우저 렌더링 과정의 주요 단계를 순서대로 설명해주세요.

https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work

1. HTML문서를 파싱하여 DOM 트리를 생성합니다.
2. CSS 문서를 파싱하여 CSSOM 트리를 생성합니다.
3. JavaScript 실행 - <script>태그를 만나면 JavaScript 코드를 실행합니다. 이 때, DOM이나 CSSOM을 수정할 수 있습니다.
4. DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성합니다. 이 때, display: none인 요소를 제외하고 실제 화면에 표시될 요소를 포함합니다.
5. 렌더트리의 각 노드에 대해 화면상 정확한 위치와 크기를 계산합니다. 이를 리플로우(reflow)라고도 합니다.
6. 계산된 레이아웃을 기반으로 실제 픽셀을 화면에 그립니다. 이를 페인팅(painting)이라고 합니다. 텍스트, 색상, 이미지, 테두리, 그림자 등 모든 시각적 요소를 그립니다.
7. 여러 레이어로 나뉜 요소들을 올바른 순서로 합성하여 최종 화면을 만듭니다. 이를 컴포지팅(compositing)이라고 합니다. 이 과정에서 GPU 가속이 사용될 수 있습니다.

Critical Rendering Path란 무엇이며, 왜 중요한가요?

중요 렌더링 경로(Critical Rendering Path)는 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 뜻합니다. 해당 개념이 중요한 이유는 각 단계에서 어떠한 일이 발생되는지 파악할 수 있어야 필요한 부분에 대해서 최적화하여 어플리케이션의 응답 속도를 개선할 수 있으며, 결국 사용자에게 컨텐츠를 빠르게 보여줄 수 있습니다.

DOM(Document Object Model)과 CSSOM(CSS Object Model)이 무엇이고 어떻게 생성되나요?

DOM은 HTML, XML 문서의 프로그래밍 인터페이스입니다. 웹 페이지의 구조를 트리 형태로 표현합니다.
브라우저가 HTML 문서를 파싱 -> 각 HTML 태그를 노드로 변환 -> 노드들을 계층적 트리구조로 구성
의 단계로 생성됩니다. DOM을 통해 JavaScript로 문서의 구조, 스타일, 내용을 동적으로 수정할 수 있습니다.

CSSOM은 문서의 스타일 관련 정보를 읽고 수정하기 위한 API 세트입니다. DOM을 사용해 JavaScript 문서의 구조와 내용을 읽는 방법과 비슷하게 CSSOM을 사용하여 JavaScript에서 문서의 스타일을 읽고 수정할 수 있습니다.
브라우저가 CSS 파일과 <style>태그 내의 스타일을 파싱 -> CSS 규칙을 해석하여 트리 구조로 변환 -> 스타일 규칙을 계산하고 상속 관계를 처리
의 단계로 생성됩니다.

[Largopie]

렌더링 과정 세부 질문

파싱(Parsing) 과정에서 HTML과 CSS는 각각 어떻게 처리되나요?

https://www.w3.org/TR/2011/WD-html5-20110525/parsing.html

HTML: HTML 문서를 토큰화 -> 토큰을 분석하여 DOM 트리 생성
CSS: CSS 규칙 분석 및 토큰화 -> 토큰을 분석하여 CSS 트리 생성

렌더 트리(Render Tree)란 무엇이며, 어떻게 구성되나요?

렌더트리란, 구축된 DOM 트리와 CSS 트리를 결합한 트리 구조입니다. 이 때, display:none 속성은 렌더 트리에서 제외됩니다. JavaScript에 의해 DOM이나 CSSOM이 변경되면 렌더트리도 재구성됩니다.

레이아웃(Layout) 단계와 페인트(Paint) 단계의 차이점은 무엇인가요?

레이아웃(Layout) 단계에서는 각 요소의 정확한 위치와 크기를 계산합니다.
해당 단계에서는 뷰포트 내에서의 요소 위치를 결정하고, 요소 간의 상대적 위치를 계산하며, 박스 모델에 따른 크기를 계산합니다. 이를 reflow라고도 부릅니다.

페인트(Paint) 단계에서는 실제 화면에 픽셀을 그리는 역할을 합니다.
해당 단계에서는 텍스트, 색상, 이미지, 테두리, 그림자 등을 그리고 레이아웃 단계에서 계산된 정보를 바탕으로 시각적 스타일을 적용합니다. 레이아웃 -> 페인트 단계를 거치기 때문에 레이아웃이 변경되면 반드시 리페인트를 유발하지만, 모든 리페인트가 레이아웃을 다시 계산하지 않습니다.

[Largopie]

최적화 관련 질문

렌더링 성능을 최적화하기 위한 방법들에 대해 설명해주세요.

렌더링 성능을 최적화하기 위해서 리플로우와 리페인트를 모두 유발하는 요소를 리페인트만 동작하도록 최적화할 수 있습니다. 대표적인 방법으로는 position의 위치를 수정하는 top, left와 같은 속성을 transition을 이용해서 리페인트만 동작하도록 최적화할 수 있습니다.

리플로우(Reflow)와 리페인트(Repaint)가 무엇이며, 어떻게 최소화할 수 있나요?

위에서 설명한 내용.

브라우저의 렌더링 최적화 기법 중 GPU 가속이 어떻게 작동하는지 설명해주세요.

GPU 가속은 브라우저 렌더링 과정에서 GPU를 활용하여 성능을 향상시키는 기법입니다. GPU 가속을 통해 CPU의 부담을 줄이고 렌더링 속도를 개선할 수 있습니다.

• 브라우저는 웹 페이지를 여러 레이어로 분리하는데, 각 레이어는 독립적으로 처리되고 합성됩니다.
• transform, opacity, filter와 같은 특정 CSS 속성과 변환을 하드웨어 수준에서 처리합니다.