브라우저 렌더링

브라우저 렌더링 기본동작

 

각 브라우저는 렌더링 엔진을 가지고 있다. 렌더링 엔진으로 파일들을 파싱(해석)하여 화면으로 그려낸다.

 

렌더링 과정

1. Client 가 -> WEB Server 에게 받은 IP 주소로 요청하면,

 WEB Server 는 -> Client 에게 해당 웹페이지의 index.html 등의 파일들을 보내준다.

 

2. 브라우저는 서버가 보내준 HTML 파일을 해석(Parsing)하여 DOM 트리를 만든다.

 

3. 브라우저는 서버가 보내준 CSS 파일을 해석(Parsing)하여 CSSOM 트리도 만든다.

 

4. DOM 트리 + CSSOM 트리를 결합해 렌더트리를 만든다.

 

5. 렌더트리로 각 노드의 위치와 크기를 계산한 레이아웃을 만든다. 뷰포트(Viewport) 내에서 각 노드들의 위치와 크기를 계산한다. (즉, 브라우저 화면의 어떤 위치에 어떤 크기로 출력될 지 계산 하는 단계이다)

 

6. Layout 계산이 완료되면 이제 요소들을 실제 화면을 그리는 페인트(Paint)를 한다.

 (요소들의 위치와 크기, 스타일 계산이 완료된 Render Tree 를 이용해 실제 픽셀 값을 적용한다.)

 

 

 

 

 

https://devbirdfeet.tistory.com/217

Network - 브라우저 렌더링 이해하기(Feat. Virtual Dom)