Browser rendering process

브라우저의 렌더링 과정을 보기전에 몇가지 알아야 할 것이 있다.

Renderging?

렌더링이란 HTML, CSS, JavaScript등 개발자가 작성한 문서를 브라우저에 그려주는 과정을 말한다.

렌더링 엔진이란?

대부분의 브라우저는 렌더링을 하는 렌더링 엔진을 가지고 있다.
각각의 브라우저 마다 렌더링 엔진이 있다.

파싱이란?

파싱은 HTML, CSS, JavaScript 같은 문서를 해석하는 것을 말한다.

UI 백엔드란?

reder tree를 브라우저에 그리는 역할을 담당한다.

브라우저의 렌더링 과정

1. 사용자가 브라우저의 uri를 입력하면 브라우저 엔진에 전달한다.
2. 브라우저 엔진은 자료 저장소에 uri의 해당하는 자료를 찾고 그 자료를 렌더링 엔진에 전달한다.
3. 렌더링 엔진은 브라우저 엔진에서 가져온 자료를 분석한다. 동시에 uri 데이터를 통신하고 자바스크립트 해석기와 UI를 백엔드에 전파한다.
4. 응답받은 데이터에서 HTML,CSS는 렌더링 엔진이 파싱한다.
5. 응답받은 데이터에서 자바스크립트는 자바스크립트 해석기가 파싱한다.
6. 자바스크립트 해석기는 파싱한 결과를 렌더링 엔진에 전달하여 3번과 4번에서 파싱한 HTML의 결과인 DOM tree을 조작한다.
7. 조작이 완료된 DOM node는 render object로 변한다.
8. UI 백엔드는 reder object를 브라우저 렌더링 화면에 띄어준다.

출처