HTML부터 Composite까지: 브라우저 렌더링 파이프라인 완전정리
브라우저는 우리가 작성한 HTML, CSS, JavaScript를 받아 사용자 화면에 시각적으로 보여주는 복잡한 과정을 수행합니다. 이 과정은 단순히 코드를 해석하는 것을 넘어 수많은 내부 단계를 거치며, 이를 '렌더링 파이프라인(Rendering Pipeline)'이라고 부릅니다. 특히 프론트엔드 개발자라면 이 과정을 이해해야만 성능 최적화, 레이아웃 조정, 스타일 변경 시 발생할 수 있는 문제를 정확히 파악하고 해결할 수 있습니다. 본 글에서는 HTML 문서가 어떻게 화면에 픽셀 단위로 그려지는지, 그 내부 과정을 DOM, CSSOM, Render Tree, Layout, Paint, Composite 순으로 완전 정리합니다.DOM과 CSSOM: 렌더링 파이프라인의 시작렌더링 파이프라인은 HTML 문..
2025. 5. 2.
