rendering

rendering

브라우저의 주요 컴포넌트

사용자 인터페이스 : 주소바, 뒤로/앞으로가기, 북마크 등 웹페이지 보는 윈도우 빼고 브라우저에 보이는 모든부분
부라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이에 인터렉션
렌더링 엔진 : 웹페이지를 노출한다. html과 css를 파싱하고 파싱된 컨텐츠를 스크린에 노출함.
네크워킹 : XHR requests같은 네트워크 콜, 다양한 플랫폼을 위해 각다 다른 구현으로 만들어짐
UI 백엔드 : 체크박스나 윈도우 같은 주요 위젯을 그리기 위해 사용됨. 특정 플랫폼에 국한 되지 않고 일반적인 인터페이스를 노출한다.
javascript 엔진
data persistence : 로컬스토리지, indexDB, webSQL, 파일 시스템 같이 로컬저장소 제공

렌더링 엔진

Gecko — Firefox
WebKit — Safari
Blink — Chrome, Opera (from version 15 onwards)

렌더링 과정

DOM tree 생성
- 렌더링 엔진은 html 문서를 파싱해 실제 돔 노드들로 변환해서 돔트리를 만든다
CSSSOM(CSS Object Model) tree 생성
- DOM 트리를 만드는 중에 head에서 link 태그에서 css 파일을 만나게 되면 렌더링 엔진에게 css 변환이 필요하다고 요청한다.
- css 속성들은 부모-자식간에 속성이 상속되기 때문에 트리구조로 관계를 설정해 각 노드의 스타일을 트리에서 재귀적으로 계산한다.
렌더 트리 생성
- 랜더 트리는 노출되는 순서대로 시각적 정보들을 만들어낸다.
- 돔 트리의 루트 노드부터 실제 노출되는 트리 만 순회 하면서 CSSOM과 매치해 계산된 스타일과 함께 노출 될 노드를 방출한다.(display:none,<script>, <meta> 태그는 무시)
렌더트리 레이아웃
- 각 랜더러(노드와 계산된 스타일을 가지고 있는 오브젝트)의 위치와 크기를 계산한다.
- 루트 렌더러(<html>) 좌표를 기준으로 재귀적으로 좌표값을 계산한다.
렌더트리 페인팅
- 렌더러의 paint() 메서드 호출
- 페인팅은 Global(전체 트리를 다시 그림)과 Incremental(특정 랜더러만 다시그림)가 있다
- 페인팅 중에 나머지 콘텐츠를 네트워크에서 계속 받아오고 파싱하면서 동시에 페인팅을 진행 한다.
스크립트 파싱
- <script> 태그를 만다면 파서는 스크립트 파싱과 스크립트 실행을 하며 파서는 작업이 끝날때 까지 대기 한다. HTML5에서는 비동기로 다른 스레드에서 스크립트 파싱과 실행을 할 수 있는 옵션을 추가 함.

(IMG)

# rendering

# 브라우저의 주요 컴포넌트

# 렌더링 엔진

# 렌더링 과정

rendering

브라우저의 주요 컴포넌트

렌더링 엔진

렌더링 과정