브라우저 렌더링 원리 관련 면접 질문

브라우저가 어떻게 웹페이지를 화면에 그리는지 아는 것은 프론트엔드 개발자에게 정말 중요해요. 성능 최적화를 하려면 브라우저의 내부 동작을 이해해야 하거든요. 복잡해 보이지만 차근차근 따라가면 그리 어렵지 않아요.

전체 렌더링 과정

1. 브라우저 렌더링 과정을 순서대로 설명해주세요. HTML 문서를 받으면 파싱해서 DOM 트리를 만들어요. 동시에 CSS를 파싱해서 CSSOM 트리를 만들죠. 이 둘을 합쳐서 렌더 트리를 생성하고, 각 요소의 위치와 크기를 계산하는 레이아웃 단계를 거쳐요. 마지막으로 화면에 실제로 그리는 페인트 단계와 여러 레이어를 합치는 컴포지트 단계를 진행합니다.

2. DOM과 렌더 트리의 차이점은? DOM은 HTML 문서의 모든 요소를 트리 구조로 나타낸 것이고, 렌더 트리는 실제로 화면에 그려질 요소들만 포함해요. display: none 같은 보이지 않는 요소는 렌더 트리에 포함되지 않아요. 마치 연극 대본(DOM)과 실제 무대에 올라갈 배우들(렌더 트리)의 차이와 같아요.

3. Critical Rendering Path가 무엇인가요? 브라우저가 HTML, CSS, JavaScript를 받아서 화면에 그리기까지의 핵심 과정이에요. 이 경로를 최적화하면 페이지 로딩 속도가 빨라집니다. CSS와 JavaScript 최적화, 불필요한 리소스 제거 등이 핵심이에요.

레이아웃과 페인팅

4. 리플로우(Reflow)가 언제 발생하나요? 요소의 크기나 위치가 변경될 때 발생해요. width, height, margin, padding 변경, DOM 노드 추가/삭제, 윈도우 리사이징 등이 원인이 되죠. 레이아웃을 다시 계산해야 해서 성능에 부담이 커요.

5. 리페인트(Repaint)는 무엇인가요? 레이아웃은 변경되지 않고 색상, 배경, 그림자 같은 시각적 속성만 변경될 때 발생해요. 리플로우보다는 비용이 적지만 여전히 성능에 영향을 줍니다. 마치 집의 구조는 그대로 두고 벽지만 바꾸는 것과 같아요.

6. 레이어(Layer)는 어떻게 생성되나요? 3D transform, opacity, position: fixed, CSS 필터 등을 사용하면 새로운 레이어가 생성돼요. GPU에서 독립적으로 처리되어서 성능이 좋아지지만, 너무 많이 만들면 메모리 사용량이 늘어나요.

성능 최적화

7. 렌더링 성능을 최적화하는 방법은? 불필요한 리플로우와 리페인트를 줄이는 것이 핵심이에요. CSS 변경을 한 번에 처리하고, 애니메이션은 transform과 opacity를 사용하며, 가능한 한 레이어를 활용하는 것이 좋아요. 마치 청소할 때 한 방씩 차례대로 하는 것보다 한 번에 정리하는게 효율적인 것과 같아요.

8. GPU 가속을 활용하는 방법은? transform: translateZ(0)나 will-change 속성을 사용하면 해당 요소가 GPU 레이어로 이동해요. 3D transform, opacity 애니메이션은 GPU에서 처리되어서 더 부드러워요. 하지만 남용하면 메모리 사용량이 늘어나니 적절히 사용해야 해요.

9. 60fps를 유지하려면 어떻게 해야 하나요? 한 프레임당 16.67ms(1000ms/60fps) 안에 모든 처리를 끝내야 해요. JavaScript 실행 시간을 줄이고, 복잡한 CSS 선택자를 피하며, 애니메이션은 transform과 opacity만 사용하는 것이 좋아요.

10. 가상 스크롤링이 왜 필요한가요? 수천 개의 리스트 아이템을 모두 DOM에 렌더링하면 메모리 사용량이 크고 스크롤이 버벅거려요. 화면에 보이는 부분만 렌더링하고 스크롤에 따라 동적으로 교체하는 방식이 가상 스크롤링이에요.

브라우저 렌더링 원리를 이해하면 "왜 이 페이지가 느린지", "어떻게 최적화할 수 있는지"를 정확히 파악할 수 있어요. 실무에서 성능 문제를 해결한 경험이 있다면 구체적인 사례를 들어 설명할 수 있을 거예요.