WebKit at the Future Web Forum 2010

WebKit 허준회 (@joone_net) http://opensoftware.kr

오늘의 이야기 • WebKit Project 소개 • 주요 특징 • 모바일 및 웹표준 지원 현황 • 앞으로의 미래 Future Web Forum 2010 2

WeKit Project • 오픈소스 웹 엔진 • 2 백만 라인 코드 , 대부분 C++ • ~10 % 브라우저가 사용 • 150 명 커미터 • LGPL, BSD License Future Web Forum 2010 3

WebKit 의 시작 • KDE Project 에서 KHTML/KJS 로 시작 • Apple 에서 Fork 하여 2001 년 부터 개발 시작 • 2005 년 오픈소스화 됨 • Apple, Google 주도로 프로젝트 운영 Future Web Forum 2010 4

WebKit Por t WebKitMac WebKitWin WebKitGtk WebKitQt/EFL WebKitChromium WebCore JavaScriptCore WebCoreSupport OSX/iOS Windows GTK+ QT EFL Android Chromium • WindowsCE, Brew • wxWidget, Haiku(BeOS) 지원 Future Web Forum 2010 5

누가 사용하는가 ? Future Web Forum 2010 6

WebKit Maintainers etc 50 28% Apple 57 31% Apple Google RIM 3 2% Nokia RIM Nokia 7 4% etc Google 64 35% 2010.7 http://trac.webkit.org/wiki/WebKit%20Team Future Web Forum 2010 7

어떻게 참여하는가 ? 공개 소스 저장소 svn.webkit.org 공개 버그 데이터베이스 일일 빌드 다운로드 bugs.webkit.org nightly.webkit.org 웹사이트와 블로그 webkit.org 메일링 리스트 lists.webkit.org IRC 채널 #webkit irc.freenode.net Safari and WebKit Overview, Session 325 - WWDC2008 Future Web Forum 2010 8

Webkit 의 발전 속도 • Bug 8007 → 2006-03-27 • Bug 18000 → 2008-03-21 • Bug 28000 → 2009-08-04 • Bug 38000 → 2010-04-22 • Bug 48000 → 2010-10-02 Future Web Forum 2010 9

WebKit 의 주요 특징 Future Web Forum 2010 10

Browser 성능 SunSpider V8 Dromaeo Flying (ms) benchmark benchmark images Safari5.0 383 2,490 235 3 (SquirrelFish) Chrome 5.0 379 5,151 6,541 3 (V8) IE 8.0 4,850 106 Failed 5 IE 9.0 612 837 150 64 Firefox3.6 984 464 98 12 (TraceMonkey) Opera10 413 3,296 2,625 28 Windows 7 에서 수행 • Chrome JavaScript 성능이 가장 우수 • Graphic 성능은 IE9.0 이 가장 우수 Future Web Forum 2010 arstechnica.com http://bit.ly/aTDRA9 11

Video 지원 Codecs IE Firefox Safari Chrome Opera iPhone Android Theora . 3.5+ . 5.0+ 10.5+ . . H.264 . . 3.0+ 5.0+ . 3.0+ 2.0+ WebM 9.0+ 4.0+ . 6.0+ 10.6+ . 계획 중 http://diveintohtml5.org/video.html Future Web Forum 2010 12

Chrome Extension ● Chrome 4.0 부터 Extension 지원 • JSON 형식으로 manifest 파일 정의 • 웹기술 이용하여 쉽게 개발 가능 • 브라우저와 다른 프로세스로 동작 Future Web Forum 2010 https://chrome.google.com/extensions 13

Safari Extension • Safari 5.0.1 부터 지원 • HTML5, CSS3, JavaScript 로 개발 • 바로 설치하여 사용 가능 • Extension 용 JavaScript API 제공 Future Web Forum 2010 14

개발 툴 • DOM, CSS 수정 • Resource Loading, Rendering Profiling 가능 • Cookie, Local Storage, Client- Side Database 보기 • JavaScript Debugger Future Web Forum 2010 15

모바일 지원 현황 Future Web Forum 2010 16

Viewpor t Meta Tags • 웹페이지가 화면 크기에 잘 맞도록 지원 • 기본 Viewport width = 980px Future Web Forum 2010 17

Viewpor t meta tag <meta name = "viewport" content = "width = device-width" user-scalable=no> Future Web Forum 2010 18

CSS Viewpor t Future Web Forum 2010 19

CSS Viewpor t Example Future Web Forum 2010 20

Fast Mobile Scrolling • Off screen rendering • Tile cache management http://froystig.wordpress.com/2009/08/20/rendering-with-tiles-in-fennec/ Future Web Forum 2010 21

Tile Cache 관리 • Viewport 를 tile 로 나눔 • 한번 그린 영역은 보관 • 보이지 않는 주변 영역을 미리 그림 Future Web Forum 2010 22

Spatial Navigation 지원 • Focusable element 를 key 로 이동하는 기능 • Non-touch mobile browser 를 위해 필요 • 마우스 사용이 불편한 사람에게 필요 Future Web Forum 2010 23

웹표준 구현 현황 Future Web Forum 2010 24

HTML5 Parser • 모든 브라우저가 같은 방식으로 Invalid 파싱 • Invalid HTML 을 동일하게 처리 ? • SVG 와 MathML in HTML • Gecko2.0, WebKit nightly build 에 적 용 Future Web Forum 2010 25

출처 : 실전 HTML5 가이드 Future Web Forum 2010 26

<li><em>SVG and MathML in HTML</em>. One of the cool new features of the HTML5 parsing algorithm is the ability to embed SVG and MathML directly in HTML pages. To embed SVG, you simply add an <svg> tag to your HTML page and you can use the full power of SVG. <p><br /> <svg width="12cm" height="3.6cm" viewBox="0 0 1000 300"> <defs> <lineargradient id="orange_red" x2="0" y2="1" > <stop stop- color="yellow" /> <stop offset="1" stop-color="red" /> </lineargradient> </defs> <path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" fill="none" stroke="red" /> <text font-family="Verdana" font-size="72.5" fill="url(#orange_red)" > <textpath xlink:href="#MyPath"> Look mom, SVG in HTML! </textpath> </text> (If you had an HTML5 compliant browser, the previous text would be colored and on a path.)</svg></p> <p>(View source to see the demo SVG code inline in this HTML post.)</p> </li> Future Web Forum 2010 27

Future Web Forum 2010 28

HTML5 Video • 자막 – Media Multitrack API • Full screen http://www.w3.org/WAI/PF/HTML/wiki/Media_MultitrackAPI Future Web Forum 2010 29

<a ping> • URL 을 접근할 때 , 함께 접근할 ping 속성 지정 • Redirect 없이 User tracking 가능 • 웹페이지 접근 성능 향상 • <a>, <area> tag 에서 사용 Future Web Forum 2010 30

css ime-mode proper ty <ul> <li>ime-mode:active : <input type="text" size="20" style="ime-mode:active;"> <li>ime-mode:auto : <input type="text" size="20" style="ime-mode:auto;"> <li>ime-mode:inactive : <input type="text" size="20" style=”ime-mode:inactive;”> <li>ime-mode:disabled : <input type="text" size="20" style="ime-mode:disabled;"> </ul> IE5.0, Gecko1.9 Future Web Forum 2010 31

#search .input_text{width:323px;height:17px;line-height:16px;margin:5px 0 0 6px;border:0 none;font-weight:bold;font-size:14px;color:#000;*ime-mode:active; outline:none} #q{display:inline;width:390px;height:18px;line-height:18px;float:left;margin:11px 0 0 13px;padding:3px 0 0 0;border:0;background-color:#fff;color:#000;font- size:16px;font-weight:bold;ime-mode:active;} Future Web Forum 2010 32

User Inter face Independence for Accessible Rich Internet Applications • ScreenReader Interface – window.navigator.accessibility.screenreader.active – window.navigator.accessibility.screenreader.name – window.navigator.accessibility.screenreader.version • Magnifier – window.navigator.accessibility.magnifier.active – window.navigator.accessibility.magnifier.name – window.navigator.accessibility.magnifier.version http://lists.w3.org/Archives/Public/wai-xtech/2010Aug/att- 0079/UserInterfaceIndependence.html Future Web Forum 2010 33

Device Orientation & Motion Event Future Web Forum 2010 http://dev.w3.org/geo/api/spec-source-orientation.html 34

Web Audio • 오디오를 처리하고 합성하는 JS API 제공 • Canvas, WebGL 과 함께 사용 • 게임 등에 활용 가능 http://chromium.googlecode.com/svn/trunk/samples/audio/ specification/specification.html Future Web Forum 2010 35

Web Audio example var context = new AudioContext(); function playSound() { var source = context.createBufferSource(); source.buffer = dogBarkingBuffer; source.connect(context.destination); source.noteOn(0); } Future Web Forum 2010 36

IndexedDB • WebStorage – localStorage, sessionStorage • Web SQL Database(Client-side database) – SQLite 에 의존적 • IndexedDB 표준화 – JS API 로 큰 크기의 structured data 관리 가능 – Mozilla, WebKit 일부 구현 , IE 구현 예정 Future Web Forum 2010 37

IME Composition Events Future Web Forum 2010 38

WebKit 의 미래 Future Web Forum 2010 39

Multiple Process 지원 • 목적 Web Process – UI 반응성 향상 W W W – Content 에 의한 Crash 방지 – 전반적인 성능 향상 – Multi-Core 지원 Tab Tab Tab – 보안성 강화 UI Process • 단점 – 메모리를 많이 사용함 – 포팅이 어렵다 Future Web Forum 2010 40

기본 동작 UI Process Web Process (Rendering Engine) Browser UI Layout Engine JS Engine Off Screen Shared Memory surface • 서로 다른 프로세스에서 Rendering 과 화면 출력을 수행 Future Web Forum 2010 41

WebKit2 http://trac.webkit.org/wiki/WebKit2 Future Web Forum 2010 42

그래픽 하드웨어 가속 • 목적 – 그래픽 및 브라우저 성능 향상 – WebGL, CSS 3D transforms 가속 • 방법 – CPU 대신 GPU 를 이용하여 연산 – 불필요한 데이터 복사를 줄인다 • Video memory <==> System memory – GPU 에서 Compositing 한다 Future Web Forum 2010 43

하드웨어 가속 아키텍쳐 • 2D 가속 (Vector Graphic Engine, Image Processing, Font Caching) • 3D 가속 (WebGL, CSS 3D transform) • 비디오 처리 (HW codec, Color space 변환 ) • Video Memory 에 바로 Rendering Future Web Forum 2010 44

Q&A Future Web Forum 2010 45

WebKit at the Future Web Forum 2010

by Joone Hur on Nov 04, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 601

Statistics

WebKit at the Future Web Forum 2010 — Presentation Transcript

http://knight76.tistory.com	598
http://hyesoo-shin.blogspot.com	3