웹 브라우저 작동 원리

hyeongirlife·2022년 4월 28일

목록 보기

79/90

웹 브라우저마다 다른 렌더링 엔진

safari 는 Webkit
Firefoxsms Gecko
Chrome은 Blink

총 다섯 단계로 렌더링 과정을 설명할 수 있습니다.

Parsing 입니다. 브라우저가 페이지를 렌더링하려면 가장 먼저 받아온 HTML 파일을
해석해야 합니다. 이때 HTML을 파싱하여 DOM TREE를 구성하게 됩니다. CSS도 마찬가지로 파싱하여 CSSOM TREE를 구성합니다.
두번째 단계는 Style 단계 입니다. Parsing 단계에서 생성한 DOM TREE와 CSSOM TREE를 매칭시켜 Render Tree를 구성합니다. Render Tree는 실제로 화면에 그려질 Tree 입니다.
Layout 단계에서는 Render Tree를 화면에 어떻게 배치할 것인지 노드의 정확한 위치와 크기를 계산합니다. 루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영합니다. 이는 저희가 각 태그에 CSS를 작성하고 그것이 화면에 적용되는 것을 생각하면 이해하기 쉽습니다.
paint 단계에서는 Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환 합니다. 또한 스타일이 복잡할수록 Paint 시간도 늘어납니다. 예를 들어, 단색 배경의 경우 시간과 작업이 적게 필요하지만, 그림자 효과는 시간과 작업이 더 많이 필요합니다.
마지막 Composite 단계에서는 Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타냅니다. 이 때 화면에서 웹 페이지를 볼 수 있게 됩니다.

머릿속에 있는 내용을 정리하기