SPATIUM Desktop
주소복사
About Operating System Languages Tools Favorites Notice Visit TEST  
     ADK (2)
     android (3)
     ASP (5)
     ASP.Net (1)
     C# (5)
     HTML (9)
     JAVA (6)
     JavaScript (9)
     jQuery (5)
     Mobile Web (2)
     Oracle (8)
     PHP (7)
     Spring Framework (4)
     SQL (15)
     WPF (5)
   ID  
   Password  
  |  
  Location United States
  IP Address 54.80.87.166
2018. 10
123456
78910111213
14151617
18
1920
21222324252627
28293031
Category  Languages, HTML
Writer 김태우 Date 2014-12-05 16:36:46 Visit 1493
Web Browser Works - Rendering

 

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

Webkit 동작 과정

 

Gecko

Gecko 동작 과정

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

 

 

 

Tags  Web Browser Works - Rendering, 웹브라우저의 작동원리 - 렌더링,
  Relation Articles
[Languages-JAVA] JAVA JDBC/DBCP/JNDI (2018-04-12 16:47:35)
[Languages-android] Android Thread (2017-01-05 12:21:36)
[Languages-android] Android Application & Activity Lifecycle (2017-01-05 10:54:20)
[Languages-android] Android앱 개발시 로그인 처리(google, facebook) (2017-01-03 16:17:57)
[Languages-SQL] 테이블 정의서 (2016-06-29 20:25:11)
[Languages-C#] TextBox(with Border) on C# (2016-04-05 17:00:59)
[Languages-C#] ComboBox(with Border) on C# (2016-04-05 16:54:40)
[Languages-Oracle] Oracle 기본(RAC) (2016-03-01 11:25:01)
[Languages-JAVA] REST Service (2016-02-12 16:31:09)
[Languages-C#] Flicker해결(DoubleBuffer) on C# (2016-01-28 17:24:13)
  Your Opinion
Member ID
150 letters
Copyright (C) SPATIUM. All rights reserved.
[SPATIUM]WebMaster Mail