Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

1-2. 브라우저 동작 원리

HTML5 강의안 - 1-2. 브라우저 동작 원리

  • Inicia sesión para ver los comentarios

1-2. 브라우저 동작 원리

  1. 1. www.javaspecialist.co.kr www.javaspecialist.co.kr 브라우저 동작 원리 HTML 문서가 실행되는 브라우저의 동작 원리를 알아본다. HTML DOM 객체가 어떤 원리에 의해서 자바스크립트 코드에 의해 제 어되는 지를 알 수 있다.
  2. 2. www.javaspecialist.co.kr 1. 브라우저 • 주요 기능 – 브라우저의 주요 기능은 선택한 웹 리소스(HTML, PDF, 이미지 등)를 브라우저의 화면상에 표현해주 는 기능. – 서버에 리소스를 요청하고 수신하는 과정을 모두 포함. – 브라우저가 HTML을 해석하고 화면에 나타내는 방법은 HTML, CSS 표준에 따르게 되는데 브라우저 에 따라 스팩을 따르는 정도는 조금 상이하다고 볼 수 있음. • 종류 – 1990년대 중반 인터넷 대중화를 이끈 넷스케이프와의 경쟁에서 승리를 거둔 마이크로소프트사의 인 터넷 익스플로러(IE) – 오픈소스 개발자들이 구성한 모질라 재단에서 선보인 파이어폭스 – 1994년에 선보여 17년 동안 끊임없이 진화하며 다른 웹 브라우저에에도 큰 영향을 끼쳤던 오페라 – 애플이 오픈소스의 웹킷 프로젝트와 공동 연구를 통해 선보인 사파리 – 빠른 속도를 목적으로 웹킷을 바탕으로 선보인 구글 크롬 – 그 외 모바일용 브라우저들 • 각종 모바일 장치의 디폴트 브라우저들 • 크롬 모바일 웹브라우저, 오페라 모바일 웹브라우저, 미렌 브라우저, 돌핀 브라우저 등
  3. 3. www.javaspecialist.co.kr 2. 브라우저 주요 구성요소 • UI (User Interface) • 각 브라우저의 UI는 주소바, 뒤로가기/앞으로가기 버튼, 북마크 메뉴 등을 공통적으로 포함. • 브라우저 엔진 • 렌더링(rendering) 엔진에 작업을 요청하고 다루는 인터페이스 부분. • 렌더링 엔진 • 요청된 컨텐츠를 화면에 표시하기 위해 필수적인 부분. • 예를 들어 요청된 페이지가 HTML이라 할 때, 렌더링 엔진은 HTML과 CSS를 파싱하고 화면에 파싱된 컨텐츠를 표현하 는 역할을 수행. • 네트워킹 • HTTP request와 같은 네트워크 호출을 위해 필요한 부분. • 각 플랫폼에 의존적인 부분과 플랫폼에 독립적인 인터페이스 부분으로 구성. • UI 백엔드 • 콤보박스나 윈도우(window)와 같은 기본 위젯을 화면에 그리는데(drawing) 필요. • 자바스크립트 해석기 • 자바 스크립트 코드를 파싱하고 실행하는데 필요. • 데이터 스토리지 • 퍼시스턴스 계층 (persistence layer). • 브라우저는 쿠키등과 같이 데이터를 로컬영역에 저장할 공간이 필요. – Chrome의 경우에 경량형 RDB sqlite를 사용 함. – HTML5 표준으로 채택된 데이터베이스는 IndexedDB라는 Key/Value 기반 데이터베이스. User Interface Browser Engine Rendering Engine Networking JavaScript Interpreter UI Backend DatabasePersistence 브라우저 주요 구성요소 크롬은 다른 브라우저와는 다르게 렌더링 엔진의 인스턴스 를 각 탭별로 사용한다. 즉 각 탭별로 별도의 렌더링 엔진을 사용하여 화면을 표시한다.
  4. 4. www.javaspecialist.co.kr 3. 브라우저는 어떤 일을 하는가? • 웹 엔진? – 대부분의 웹브라우저는 HTML을 처리하는 부분과 UI를 구분하여 설계. 그 이유는 HTML처리는 웹브라우저 뿐만 아 니라 이메일 편집기, 위젯(Widget) 실행 등에 사용되기 때문. 그래서, 이 컴포넌트를 (웹)브라우저 엔진이라고 부를 수 있지만, 브라우저만 사용되는 것이 아니기 때문에 웹 엔진이라고 부르는 것이 더 맞는 표현. • 웹 엔진이 주로 하는 일은 웹서버에 저장된 HTML문서를 다운로드 받아 특정 윈도우 영역에 표시하는 것. • 좀 더 자세히 살펴보면 기본적으로 다음과 같은 작업을 실행. – 불러오기(Loading) – 파싱(Parsing) – 자바스크립트 실행 – 레이아웃(Layout)작업 – CSS 처리 – 그리기 – 이벤트 처리 – HTML 편집 브라우저가 하는 일? 아래의 그림이 잘못된 그림은 아니 다. 그러나 이 슬라이드의 목적은 브라우저가 내부적으로 어떻게 동 작하는지를 알아보자는 것이다.
  5. 5. www.javaspecialist.co.kr 4. 브라우저는 어떤 일을 구체적으로… • 불러오기(Loading) – 불러오기는 HTTP 모듈 또는 파일시스템으로 전달 받은 리소스 스트림(resource stream)을 읽는 과정. – 로더(Loader)가 이 역할을 맡고 있음. 로더는 단순히 읽는 것이 아니라, 이미 데이터를 읽었는지도 확인하 고, 팝업창을 열지 말지, 또는 파일을 다운로드 받을 지를 결정함. • 파싱(Parsing) – 파싱은 DOM(Document Object Model) 트리를 만드는 과정. – 일반적으로 웹 엔진은 HTML, XML 파서를 각각 가지고 있음. HTML파서는 말 그대로 HTML문서를 파싱하는데 사용되고, XML파서는 XML 형식을 따르는 SVG, MathML 등을 처리하는데 사용함. • 렌더링 트리(Rendering Tree) 만들기 – 파싱으로 생성된 DOM 트리는 HTML/XML문서의 내용을 트리 형태로 자료구조화 한 것. – 실제 이 내용을 화면에 표시하기 위해서는 다른 형태의 데이터 구조가 필요. 다시 말해, DOM 트리는 내용 자체 를 저장하고 있고, 화면에 표시하기 위한 위치와 크기 정보, 그리는 순서 등을 저장하기 위한 별도의 트리 구조 가 필요. 이를 일반적으로 렌더링 트리라고 부름. – HTML의 문서의 <head>, <title>, <body> 태그와, CSS "Display" 속성(property) 값이 None인 태그등은 화면에 표시될 필요가 없기 때문에 렌더링 트리에 추가되지 않음. • CSS 스타일(Style) 결정 – CSS는 HTML의 문서에서 내용과 별도로 표현을 나타내기 위해 만들어졌음. – CSS 스타일은 셀렉터(selector) 정의에 따라 적용되는 태그가 다를 수 있어서, 모든 CSS 스타일을 분석하여 최 종적으로 어떤 태그에 어떤 스타일 규칙이 적용되는지를 결정해야 함. • 레이아웃(Layout) – 렌더링 트리가 생성될 때, 각 렌더(Render) 객체는 위치나 크기를 가지고 있지 않음. – 각 렌더 객체가 위치와 크기가 갖게 되는 과정을 레이아웃(Layout)이라고 함. • 그리기(Painting) – 그리기 단계는 렌더링 트리를 탐색하면서 특정 메모리 공간에 RGB값을 채우는 과정. 마치, 그릴 대상을 적은 카드 뭉치에서 맨 윗 장부터 하나씩 꺼내어 적힌 대상을 빈 종이에 그리 것과 비슷하다고 볼 수 있음. 물론 카 드에는 어느 위치에 어떤 크기로 그릴지, 어떤 색깔로 그릴지 자세히 적혀음.
  6. 6. www.javaspecialist.co.kr 5. 렌더링 엔진 • 브라우저별 사용된 렌더링 엔진의 종류. – IE - Trident – 크롬 - Webkit – 파이어폭스 - Gecko – 사파리 - Webkit – 오페라 - Presto • 렌더링 엔진은 네트워크 계층으로부터 요청된 페이지의 컨텐츠를 얻어 오는데 대략 8k 크기 의 단위로 이를 수행함. • 렌더링 엔진 기본 흐름 – 렌더링 엔진은 HTML 문서를 파싱 할 것이고 "DOM tree"라 불리는 트리형태로 DOM 노드를 생성하게 되며 – HTML의 스타일 정보들은 별도의 render tree로 구성된다. 렌더트리는 색상이나 dimension들을 포함 하는 그래픽적 속성들의 사각형을 포함하며 사각형들은 올바른 순서대로 화면에 표시된다. – 렌더트리를 생성한 후에 렌더트리의 "layout" 과정을 수행한다. 다시 말해서 각 노드들이 화면상에서 정확히 그들이 놓여있어야 할 곳에 나타나게 된다. – 다음과정은 "painting"인데 이 과정에서 렌더 트리를 순회하면서 스타일 정보를 찾아서 UI 백엔드를 이용하여 각 노드들을 화면상에 표현하게 된다. 렌더링 엔진 기본 흐름 Parsing HTML to construct the DOM tree Render tree construction Layout of the render tree Painting the render tree 참고  각 브라우저에 사용된 자바스크립트 엔진(해 석기) • IE - Chakra • 크롬 - V8 (Crankshaft) • 파이어폭스 - JaegerMonkey • 사파리 - Nitro • 오페라 - Carakan
  7. 7. www.javaspecialist.co.kr 6. 렌더링 엔진 종류 (1/4) • 트라이던트(Trident) – 마이크로포스트 윈도우 버전의 IE가 채용하고 있는 레이아웃 엔진 – HS HTML로 알려져 있으며 이 엔진은 1997년 IE 4.0부터 도입되어 현재까지 새로운 기술 을 탑재해 꾸준히 업그레이드 되고 있음 – 트라이던트는 개발자가 자사 응용 프로그램에 웹 브라우징을 쉽게 추가할 수 있도록 모듈 방식으로 제공됨 • IE의 시장 독점이 계속되어온 탓에 트라이던트 엔진 역시 오랫동안 독점적인 위치를 차 지하게 되었고, 특히 한동안 IE의 개발을 하지 않았기에 역시 트라이던트 코어의 업데이 트도 상당기간 이뤄지지 않았으며, 결국 W3C 표준과 맞지 않고 내부의 버그와 보안 문 제들이 누적되어 브라우저의 호환성이나 성능도 매우 부족한 모습을 보였었음. – IE7에서 MS는 트라이던트 레이아웃에 큰 변화를 주어 웹 표준 대응을 개선하고 새로운 기 술을 지원하게 되었지만, 상대적으로 다른 브라우저들에 사용된 엔진들에 비해서는 크게 뒤떨어진 편이라고 할 수 있음 – IE9에는 SVC, XHTML, HTML5 지원이 추가된 트라이던트 5.0 버전이 적용되었음
  8. 8. www.javaspecialist.co.kr 6. 렌더링 엔진 종류 (2/4) • 웹킷(WebKit) – 웹킷은 애플, 노키아, 어도비, 구글 등에 의해 공동 개발된 오픈 소스 기반의 웹 브라우저 엔진 – 웹킷은 KDE의 KHTML와 KJS를 기반으로 제작되었으며 단순히 레이아웃 엔진이라고 부 르지 않는 이유는 바로 HTML, SVG를 위한 레이아웃, 렌더링, DOM 라이브러리인 Webcore와 웹킷 기능을 위한 자바스크립트 엔진인 JavaScriptCore, 그리고 자바스크립트 오류를 검진할 수 있는 Drosera 디버거를 함께 포함하고 있는 상위 개념이기 때문이다. – 웹킷 엔진은 애플 사파리와 구글 크롬 외에도 맥용 옴니웹, 시이라, 아로라, 미도리, 유즈블, iCab, 어도비 통합 런타임 등에도 사용되고 있음 • 특히 웹킷은 휴대폰 웹 브라우저에서 보다 많이 사용되고 있는데, 대표적으로 구글의 안 드로이드, 애플의 아이폰, 그리고 노키아의 Series 60의 브라우저들이 모두 웹킷 엔진 기반으로 되어 있음 • 또한 위젯 엔진에서의 사용도 증가하고 있어 차이나 텔레콤의 BAE, 애플의 대시보드, 노키아 WRT역시 모두 웹킷 엔진이 적용되어 있음 – http://webkit.org * KDE : K Desktop Environment, 그놈과 유사한 프로젝트 * KHTML : KDE 프로젝트가 개발한 HTML 레이아웃 엔진 * KJS : KDE 프로젝트가 개발한 JavaScript 엔진 * SVG(Scalable Vector Graphics) : 2차원 벡터 그래픽을 표현하기 위한 XML기반의 파일 형식
  9. 9. www.javaspecialist.co.kr 6. 렌더링 엔진 종류 (3/4) • 게코(Gecko) – 게코는 오픈 소스 코드이며 C++로 만들어진 레이아웃 엔진 – 넷스케이프에서 개발했지만 넷스케이프의 몰락 이후 현재는 모질라에서 유지-보수를 담당 하고 있으며 파이어폭스에서 사용되고 있음 – 게코 엔진의 가장 큰 특징은 완벽한 오픈 소스 코드이기 때문에 전세계 개발자들이 이 코 드를 사용해 기능을 추가할 수 있게 되면서 개발 수준이 비약적으로 향상되었다는 점 – 또한 오픈 소스이기 때문에 게코 엔진을 사용하는 브라우저도 많으며, 이로 인해 시장에서 꾸준히 높은 점유율을 유지하고 있음 – 현재 게코엔진을 사용한 브라우저는 파이어폭스를 비롯해 넷스케이프 6-9, SeaMonkey, Camino, Mozilla, Flock, Galeon 등으로 다양하며 구글 가젯 엔진도 게코 엔진을 사용하였 음. – 이 외에 게코 엔진은 뛰어난 확장성을 바탕으로 윈도우즈, BSD, 리눅스, 맥 OS X에서 사 용이 가능하며 참고로 파이어 폭스 4에는 Gecko 2 최신 버전이 적용되었음.
  10. 10. www.javaspecialist.co.kr 6. 렌더링 엔진 종류 (4/4) • 프레스토(Presto) – 프레스토는 오페라 소프트웨어가 오페라 브라우저를 위해 개발한 레이아웃 엔진. – 프레스토 엔진은 2003년 오페라 7.0에 처음으로 적용되었으며 렌더링 속도의 최적화에 중 점을 두고 가장 빠른 속도를 제공해왔음 – 하지만 프레스토 엔진은 오페라 브라우저 또는 관련된 제품만 사용이 가능하고 소스나 바 이너리 DLL등은 공개적으로 사용할 수 없기 때문에 호환성이나 대중성에서는 다소 부족 한 모습임 – 프레스토는 다른 엔진에 비해 뛰어난 스크립트 처리 능력과 빠른 자바스크립트 실행 속도 를 제공하지만, 상업용 엔진이기 때문에 사용되는 브라우저가 제한되어 개발 및 발전을 가 로막고 있다고 평가를 받고 있음. 오페라 11에는 프레스토 2.7 버전이 사용되어 이전 2.6 버전에 비해 더 많은 마크업과 API를 지원함
  11. 11. www.javaspecialist.co.kr 7. 렌더링 엔진의 메인 플로우 Webkit 렌더링 엔진의 메인 플로우 HTML Style Sheets HTML Parser Painting DOM Tree Layout CSS Parser Attachment Rende r Tree Style Rules Display DOM 자바스크립트로 DOM Tree의 객 체를 제어한다면 화면 조작이 가능 하다는 의미이다. 물론 그럴려면 자바스 크립트가 실행되기 전 에 HTML문서가 파싱 되어 DOM Tree가 만 들어져 있어야 한다는 것이다. 스타일을 처리하 고(computation) renderer를 생성 하는 과정을 말한 다. 렌더 객체가 위치 와 크기가 갖게 되 는 과정을 말한다. 렌더링 트리를 탐 색하면서 특정 메 모리 공간 에 RGB값을 채 우는 과정이다.

×