브라우저 렌더링 프로세스 - 1

브라우저 렌더링 요소 에는 다음과 같은 7가지 과정이 있다.

하나하나 먼저 간략 하게 살펴보자.

 

1. 사용자 인터페이스 : 웹으로 이 글을 보고 있다면 모두가 확인할 수 있을 것이다. 탭 창, 주소 창, 즐겨찾기 창, 닫기, 축소, 확대 등 요청한 페이지 외에 우리가 확인할 수 있는 브라우저의 부분들이다.

2. 브라우저 엔진 : 렌더링 엔진에 동작을 요청하는 등 사용자 인터페이스와 렌더링 엔진 사이에 동작을 제어합니다.

3. 자료 저장소 : 쿠키 캐시와 같은 데이터를 로컬에 저장할 공간.

3. 렌더링 엔진 : URI를 통해 사용자의 요청을 받습니다. 받은 요청을 통신, 자바스크립트 해석기, ui백엔드에게 각각 역할에 맞는 동작을 요청하고 HTML CSS Javascript를 파싱한 결과를 렌더링 합니다.

4. 통신 :렌더링 엔진으로 부터 HTTP 요청 등을 받아 네트워크에서 처리한 후 렌더링 엔진으로 그 응답을 전달합니다.

5. 자바스크립트 해석기 : 자바스크립트를 파싱해서  파싱한 결과를 렌더링 엔진으로 보냅니다.

6. UI 백엔드 : 렌더 트리를 브라우저에 paint 합니다.

 

브라우저 렌더링 과정

 

1. 사용자 인터페이스에서 URI로 요청을 받고 요청을 받은 것을 브라우저 엔진에 전달한다.

2. 브라우저 엔진은 먼저 자료저장소에 캐시, 쿠키가 있는지 확인하고 없다면 이를 저장하고, 이를 렌더링 엔진으로 내려보낸다.

3. 렌더링엔진은 브라우저 엔진에서 내려받은 자료(HTML, CSS, JS)를 분석하고 동시에 추가할 데이터가 있다면, 통신 레이어에, 자바스크립트 파싱이 필요하다면 자바스크립트 해석기에, 렌더 트리가 완성됐다면 바로바로 UI백엔드 레이어에 보낸다. (이는 병렬적으로 진행)

4. HTML을 파싱하는 과정에서 DOM node들을 붙여 DOM tree를 구축한다.

5. JS해석기는 해석과정에서 DOM tree를 조작한다.

6. 조작이 완료된 DOM node는 Render Object로 변환된다.

7. Render Object는 Render Tree를 구축한다.

8. Render Tree가 구축되면 node의 배치가 시작된다.

9. UI백엔드는 배치한 node들을 paint한다.

 

** 받아온 HTML, CSS, Javascript 를 parsing 하는것과 render tree에 node를 그리는 것은 병렬적으로 실행된다. 즉 파싱하면서 계속해서 dom node를 조작하고 render obj를 만들고 배치하고 paint한다.

이해를 위한 사진

 

여기서 body태그가 점선인 이유는 render obj를 만드는 과정에서 body, head 태그등은 그리는 것이 없기 때문에 render obj로 만들지 않는다.

 

 

 

사진 출처 : https://jinminkim-50502.medium.com/web-browser-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95-10efb396b906