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

[klmhyeonwoo]

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

@prgmr99, @klmhyeonwoo

[prgmr99]

브라우저 렌더링 파이프라인은 6단계로 구성이 됩니다.

1. html 파일을 파싱하여 DOM tree로 구축하는 단계입니다.
2. css 파일을 파싱하여 CSSOM tree를 구축합니다.
3. 1단계에서 구축한 DOM tree와 2단계에서 구축한 CSSOM tree를 결합하여 Render tree를 구축합니다. Render tree는 실제로 화면에 표시될 요소만 포함합니다.
4. Layout 단계로 브라우저는 요소들을 배치할 위치나 크기를 계산하는 단계입니다.
5. 계산이 완료되면 Paint 단계에서는 요소들을 실제 화면의 픽셀로 그려내는 작업을 진행합니다.
6. 마지막으로 Composite 단계에서는 여러 레이어를 합성하여 최종 화면을 완성합니다.

[klmhyeonwoo]

저도 비슷해서 내일 질문 올리면서 같이 답변 남겨놓겠숨돠 ^^7 (__)..

[klmhyeonwoo]

HTML 파싱하여 DOM Tree를 생성합니다 > 이어서 CSS도 파싱을 하여 CSSOM(Cascading Style Sheet Object Model)을 생성합니다 > DOM Tree와 CSSOM을 결합하여 Render Tree를 생성합니다 > 레이아웃 단계에서 RenderTree를 통해 어떤 위치에 배치를 할지 계산하는 작업을 진행합니다. > 페인트 단계에서 실제로 화면을 그리는 작업을 진행합니다. > 마지막으로 Composite 과정에서 레이어를 하나로 합치는 과정에서 GPU를 사용해 최적화 하는 작업을 진행합니다.

[klmhyeonwoo]

리플로우 (배치)
리페인트 (스타일)