2. 브라우저 렌더링

1. 브라우저, Browser

Browse - (가게 안의 물건 등을) 둘러보다, (책, 신문 등을) 대강 읽다, (정보를 찾아) 돌아다니다

웹 브라우저(Web browser) 혹은 브라우저 는 웹 에서 페이지를 검색하고 표시하며 사용자가 하이퍼링크 를 통해 추가 페이지에 접근할 수 있도록 하는 프로그램(소프트웨어)입니다. 브라우저는 사용자 에이전트 의 가장 친숙한 유형입니다.

2. 렌더링, Rendering

3D Animation의 프로덕션 절차

렌더링이란 사용자가 브라우저를 통해 화면을 볼 수 있도록 서버로부터 받아온 바이너리 기반의 데이터들을 최종적으로는 GUI 형식으로 변환해주는 일련의 과정들을 의미

3. Browser Rendering Process - 브라우저의 렌더링 과정

3-1. 렌더링 과정 Summary

1. 화면에 그리기 위한 구성요소들(HTML Tag, CSS Style)을 위계적인 관계(Tree 구조)로 구성

2. Tree 내 요소들을 화면에 보여질 Layout(Reflow)에 맞게 적절한 위치에 배치

3. 크기와 색을 입히며 픽셀 단위로 화면에 그려내기(Painting)

3-2. 세부 과정

1. 렌더링 엔진은 Networking Layer로부터 요청된 문서(페이지)에 대한 내용을 얻기 위해 동작
2. 해당 페이지에 대한 내용은 HTML Code에 있기 때문에 해당 코드를 가져와서 구문을 분석(Parse)
3. 분석된 내용을 기반으로 DOM(Document Object Model) Tree를 형성
4. 다음으로 렌더링 엔진은 CSSOM(CSS Object Model) Tree를 형성하기 위해 CSS를 파싱(Parsing)
5. CSSOM이 형성되면 브라우저는 Networking Layer를 통해 JavaScript file과 같은 다른 자원(Asset)들을 다운받음
6. 다음으로 렌더링 엔진은 JS 코드를 실행하고, 코드 내용에 따라 DOM과 CSSOM을 조작하기 위해 JS Runtime Engine과 통신
7. DOM과 CSSOM을 취합해서 렌더 트리(Render Tree)를 구성
8. 화면(Screen)에 배치하기 위해 UI Backend와 통신하게 되고, 배치가 완료되면 화면에 픽셀을 그려냄

렌더링 엔진이 처리하는 이러한 전체 과정을 CRP(Critical Rendering Path) 라고함