Rendering pipeline 쉽게 이해하기

오늘의 5분 개발지식 라디오! 안녕하세요~ 오늘은 브라우저에서 유저의 눈에 보이도록 렌더링을 하기까지의 과정을 간략하게 정리해보려고 합니다.

 

렌더링 파이프라인의 처음 시작은 HTML과 CSS를 파싱하는 작업부터 시작합니다.

개발자가 작성한 HTML과 CSS를 분석하여 각각의 태그들의 구조도인 Document Object Model, DOM을 만듭니다. 트리형태로 생성이 되기때문에 DOM트리라고도 합니다. 

 

CSS도 비슷한 방식으로 각각의 태그들이 가져야될 스타일을 트리형태로 생성하는데 이것을 CSS Object Model, CSSOM 트리라고 합니다.

 

이 과정에서 유의할점은 DOM트리 생성을 위해 HTML을 파싱할때, script 태그를 만나게되면 병렬로 진행하는 것이 아니라 잠시 파싱을 멈추고 script태그를 먼저 처리합니다. 

 

그 이유는 스크립트에 노드 구조를 변경할 수 있는 코드가 있을수도 있기때문인데요, 따라서 스크립트가 어느 위치에 삽입되느냐에 따라서 초기 로딩 속도가 차이날수도 있습니다.

 

이렇게 HTML과 CSS를 사용하여 DOM 트리와 CSSOM 트리를 생성하면 Recalculate style이라는 단계를 통해 DOM트리와 CSSOM트리를 합쳐 Render tree를 생성합니다. 여기서 특이한점은 실제로 화면에 보여지는 노드만을 가지고 있게되는데 css의 display none이 적용되면 눈에 보이지 않기때문에 render tree에서는 삭제됩니다.

 

자 다음은 Layout 단계인데요, 이전의 recalculate style의 결과물인 render tree에는 화면에 그려져야 될 모든 노드의 계층구조와 스타일을 포함하고 있습니다. Layout 단계에서는 해당 정보들을 사용하여 모든 노드들의 크기와 위치를 계산합니다. 

 

예를 들어 개발자가 display: flex를 적용하였다면 안에 포함된 노드들이 어떤 사이즈로 어떤 간격으로 배치될지 정확한 수치가 계산되는 단계로 보시면됩니다. 실제 노드들의 크기와 위치를 결정하는 단계로 브라우저 사이즈인 view port와 폰트 사이즈에 매우 종속적인 단계입니다. viewport와 폰트사이즈가 변경되면 위치와 사이즈가 모두 재계산되야되므로 layout 단계부터 재실행됩니다.

 

마지막은 Paint단계인데요, Layout 단계에서 계산된 정보를 가지고 그래픽카드에서 실제로 픽셀단위로 그려주는 역할을 합니다. 마치 초등학교에서 그리던 점묘화를 그리는 것 처럼 화면의 각 픽셀에 어떤 색이 들어갈지를 다 세팅하여 화면에 송출하기 전 단계입니다.

 

이렇게 모든 과정이 끝나면 화면에 어떻게 하나의 페이지가 그려져야될지 그래픽카드의 메모리에 저장되게 되고 사용자가 볼 수 있게됩니다. 각각의 단계가 이전 단계의 결과물을 사용하여 점진적으로 진행되기 때문에 파이프라인이라고 부릅니다. 전체의 과정이 화면에 렌더링하기 위한 과정이기때문에 렌더링 파이프라인이라고 부르는 것입니다.

 

지금까지의 설명은 브라우저의 가장 핵심적이고 기본적인 과정만을 담고 있기때문에 최신 브라우저들은 지금까지 설명드린 내용 이상으로 여러가지 추가적인 기법들과 단계들을 통하여 최적화를 하고 있습니다.

 

끝!