브라우저
인터넷에 접속할 때 사용하는 Chrome, Safari, Firefox, Internet Explorer 등을 말함
- 유저가 선택한 자원을 서버로 부터 받아와서 유저에게 보여줌
- 단순 페이지 외에도 이미지, 비디오 등의 컨텐츠를 포함하여 렌더링 과정을 통해 유저에게 보여줌
브라우저 렌더링 동작 과정
- Parsing - HTML 파일과 CSS 파일을 파싱하여 각각의 Tree를 만듦
- Style - 두 Tree를 결합하여 Rendering Tree를 만듦
- Layout - Rendering Tree에서 각 노드의 위치와 크기를 계산함
- Paint - 계산된 값을 이용하여 각 노드를 화면상의 실제 픽셀로 변화하고, 레이어를 만듦
- Composite - 레이어를 합성하여 실제 화면에 나타냄
Parsing
- 브라우저가 페이지를 렌더링 하려면 가장 먼저 받아온 HTML을 해석해야 함
- HTML파일을 해석하여 DOM(Document Object Model) Tree를 구성함
- 파싱 중 HTML에 CSS가 포함 되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함계 진행
Style
- Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성함(Render Tree는 실제로 화면에 그려질 Tree)
ex1 ) visibilty: hidden; ->요소가 공간을 차지하고 보이지만 않기에 Render Tree에 포함
ex2 ) display: none; -> Render Tree에서 제외
Layout
- Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산함
- 루트 ~ 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영함
ex ) 크기 값을 %로 지정했다면 Layout 단계에서 %값을 계산해서 px단위로 변환함
Paint
- Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환함
- 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리
- 스타일이 복잡할수록 Paint 시간도 늘어남
ex ) 단색 배경의 경우 시간과 작업이 적게 필요하나, 섀도우 효과는 시간과 작업이 더 필요함
Composite
- Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타냄 -> 화면에서 웹 페이지를 볼 수 있음
.
.
.
.
참고
https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering
https://d2.naver.com/helloworld/59361
