브라우저 렌더링 파이프라인을 설명해주세요.

브라우저는 DOM과 CSSOM을 만들고 렌더 트리, layout, paint, composite 과정을 거쳐 화면을 표시합니다. DOM이나 스타일 변경은 이 과정 일부를 다시 유발합니다.

핵심 개념

핵심 기준은 파싱, 렌더 트리, layout, paint, composite입니다.

HTML은 DOM으로, CSS는 CSSOM으로 파싱됩니다. 브라우저는 두 트리를 결합해 보이는 요소 중심의 렌더 트리를 만들고, layout에서 위치와 크기를 계산한 뒤 paint로 픽셀을 그리고 composite로 레이어를 합성합니다. 성능 최적화는 변경이 어느 단계까지 영향을 주는지 이해하는 데서 시작합니다.

동작 흐름

1. 브라우저의 어느 단계나 API가 관여하는지 확인합니다.
2. 사용자 경험, 보안, 접근성에 미치는 영향을 함께 봅니다.
3. DevTools나 실제 지표로 추측을 검증합니다.
4. 적용 후 캐시, 호환성, 예외 상황을 점검합니다.

실제 예시

HTML → DOM
CSS  → CSSOM
DOM + CSSOM → Render Tree → Layout → Paint → Composite

예시는 핵심 흐름을 단순화한 것입니다. 실무에서는 팀의 배포 방식, 데이터 크기, 장애 영향도, 유지보수 비용까지 함께 고려해야 합니다.

실무에서 주의할 점

• 브라우저 구현 차이와 모바일 환경을 함께 확인해야 합니다.
• 성능 문제는 JavaScript만 보지 말고 네트워크와 렌더링 상태를 같이 봐야 합니다.
• 보안·접근성 기능은 편의성보다 안전한 기본값을 우선해야 합니다.

함께 연결해서 보면 좋은 키워드

Browser, Rendering, DOM, Performance

정리

한 줄로 정리하면, 브라우저는 DOM과 CSSOM을 만들고 렌더 트리, layout, paint, composite 과정을 거쳐 화면을 표시합니다. DOM이나 스타일 변경은 이 과정 일부를 다시 유발합니다. 개념의 정의뿐 아니라 적용 조건과 실패했을 때의 증상까지 함께 이해하는 것이 중요합니다.