Web Browser Works - Rendering

웹브라우저의 작동원리 - 렌더링

Browser 

- 서버에 자원(HTML, XML, Image등)을 요청 브라우저에 표현

- 자원의 주소는 URI(Uniform Resource Identifier)

- 자원이 브라우저에 표현 될때에는 HTML과 CSS 명세를 해석하여 표현하여, W3C의 표준 명세에 따름

Browsere Structure

- 사용자 인터페이스 : 주소 표시줄, 툴바등 브라우저의 기능 구현 부분

- 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사의 동작 제어

- 렌더링 엔진 : 호출한 서버 자원(HTML, XML, CSS등)을 파싱/해석 하여 화편에 표현

- 자료저장소 : 쿠키 등을 하디 디스크에 저장, HTML5에서는 '웹 데이터베이스'

- 통신 : HTTP와 같이 네트워크 호출시 사용

- 자바스크립트 해석기 : 자바스크립트 해석

- UI 백엔드 : 콤보와 창 같은 기본적인 장치를 표현, 일반적인 인터페이스로 OS에 따라 달리 표현됨

Rendering Engines

- 렌더링 엔진은 브라우저 화면에 컨텐츠를 보여주는 일을 담당

- 기본적으로 렌더링 엔진은 HTML, XML문서, Image등 서버에 요청한 자원을 보여줌

- 대표적인 렌더링 엔진은 FireFox의 Gecko(모질라가 만듬), Safari와 Chrome의 Webkit(Open Source)

Main Flow of Rendering Engines

- 렌더링 엔진은 통신으로 부터 문서의 내용을 받는데 보통 8KB 단위로 전송

- Webkit 의 동작 과정

- HTML 파싱하여 DOM tree를 만듬 -> Render tree를 만듬 -> Render tree를 배치 -> Render tree를 그림

?각 단계 설명

- 렌더링 엔진은 HTML 문서를 파싱하고 "Content tree"라고 불리는 트리에서 DOM tree(노드)를 만듬

    > HTML과 DOM tree는 1:1 관계

    > 태그의 중첩은 최대 20개 만 허용

    > 파싱중에 script 태그를 만나면 스크립트가 우선 실행되고 파싱은 중단됨

    > 파싱중 스파일시트는 다름, 이론적으로 DOM tree를 변경하지 않기 때문에 기다리거나 중단하지 않음

    > 주의할점은 파싱중에 스크립트에서 스타일 정보를 요구할때 스타일이 파싱되지 않은 상태라면 문제 발생이 높음

- 외부 CSS와 문서내 CSS 요소를 파싱, 색상 면적등 시각적 속성이 있는 정보를 포함 Render tree를 만듬

    > DOM tree와 Render tree 는 1:1관계는 아님, head 요소와 같은 비시각적 DOM 요소는 Render tree에 추가 되지 않음

    > display 속성이 none 이면 Render tree에 추가 되지 않음

    > visibility 속성이 hidden 이면 Render tree에 추가됨

- Layout 단계에서는 각 노드의 화면상 좌표를 지정

    > 크기와 위치 정보를 계산하여 배치

- Printing 에서 UI 백엔드 레이어를 이용하여 그림

- HTML의 모든 자원을 기다리지 않고 받아온 것부터 표현되고 계속해서 남은 자원을 통신으로 부터 받아옴

Webkit

Gecko

-  Webkit과 용어 차이는 있으나 동작과정은 동일