[CS]웹페이지가 브라우저에 렌더링되는 과정

"브라우저"란?

우리가 흔히 인터넷에 접속할 때 사용하는 Chrome(크롬), Safari(사파리), Firefox(파이어폭스),
Internet Explorer(익스플로러) 등을 말해.

브라우저는 유저가 선택한 자원을 서버로부터 받아와서 유저에게 보여줘. 
이 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함 돼. 
받아 온 자원들을 렌더링 과정을 통해 유저에게 보여주게 되지.

 

"렌더링" 되는 과정에서 렌더링이란?

HTML, CSS, 자바스크립트 등으로 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말해.
브라우저인 크롬, 사파리, 파이어폭스들마다 다르지만, 그 브라우저들은 렌더링을 수행하는 렌더링
엔진을 가지고 있어. 크롬은 블링크, 사파리는 웹킷, 파이어폭스는 게코라는 렌더링 엔진을 사용해.

 

🎨 웹페이지가 브라우저에 렌더링된다, 그 과정은?

다음은 기본적인 동작 과정이야.

1. DOM 트리 구축을 위한 HTML '파싱',
  CSSOM 트리 구축을 위한 CSS '파싱' 해서 각각의 'Tree(트리, DOM 트리, CSSOM 트리)'를 만듦. (Parshing)

2. 렌더 트리 '구축' (Style)

=> 렌더 트리가 구축이 되면 *javascript가 실행돼.

3. 렌더 트리 '배치' (Layout/Reflow)

4. 렌더 트리 '그리기' (Painting)

5. 레이어 '합성' 후 실제 화면에 '나타내기' (Composite)

렌더 트리란?
색상 또는 면적과 같은 "시각적 속성"이 있는 사각형을 포함하고 있어.
정해진 순서대로 화면에 표시돼.

- 렌더 트리는 CSSOM과 DOM(HTML DOM) 트리의 결합으로 만들어져.
- 렌더 트리는 웹 페이지에 나타낼 각 요소들의 위치(Layout, 레이아웃)을 계산하는데 사용되고
- 픽셀을 화면에 렌더링하는 페인트(Paint) 즉, 화면에 요소들을 표현하는 프로세스를 위해 존재해.

 

각 단계에 더 알아보자.

 

1. (Parsing 단계) HTML를 파싱 후, DOM트리를 구축하고, CSS를 파싱 후, CSSOM트리를 구축해.

아래는 DOM 트리, CSSOM 트리를 시각화 한 그림이야.

DOM(좌) 시각화 한 그림 - 출처 :  http://bit.ly/3137pmh

CSSOM을 시각화 한 그림 - 출처 : http://bit.ly/3137pmh

 

2. (Style단계) DOM Tree과 CSSOM Tree인 두 Tree를 결합해서 렌더 트리(Render Tree)를 생성(구축)해.

이미지 출처 : https://bit.ly/3iQ3ovQ

2 -1. 렌더링 트리에는 페이지를 렌더링 하는데 필요한 노드만 포함해. 
2 -2. ※ visibility: hidden 은 요소가 공간을 차지하고, 보이지만 않기 때문에 Render Tree에 포함되지만,
diplay : none 같이 화면에서 보이지도 않고 공간을 차지하지도 않는 건 Render Tree로 구축되지 않아.

=> Render Tree가 구축이 되면 Javascript가 실행이 되고 
※ HTML 중간에 스크립트가 있다면 HTML 파싱이 중단돼.

3. (Layout(레이아웃)/Reflow(리플로우) 단계) 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치, 크기를 계산해. 

4. (Paint 단계) 계산한 위치/ 크기를 기반으로 각 '노드'를 화면상의 실제 픽셀로 변환하고, 레이어를 그려줘.

5. (Composite 단계) Paint 단계에서 만들어진 레이어를 합성해서 실제 화면에 나타내.

 

 

 

 

- 참고자료 -

https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/

 

https://medium.com/%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98%ED%92%88%EA%B2%A9/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95-5c01c4158ce

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/frontend/browser-rendering.md

https://web.dev/critical-rendering-path-constructing-the-object-model/ 

https://d2.naver.com/helloworld/59361

https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-5/browser-rendering.md

https://boxfoxs.tistory.com/408

https://joooing.tistory.com/entry/rendering

https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/