webkit at the future web forum 2010

WebKit

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

2Future Web Forum 2010

오늘의 이야기

• WebKit Project 소개

• 주요 특징

• 모바일 및 웹표준 지원 현황

• 앞으로의 미래


WeKit Project

• 오픈소스 웹 엔진

• 2 백만 라인 코드 , 대부분 C+

+

• ~10 % 브라우저가 사용

• 150 명 커미터

• LGPL, BSD License


WebKit 의 시작

• KDE Project 에서 KHTML/KJS 로 시작

• Apple 에서 Fork 하여 2001 년 부터 개발 시작

• 2005 년 오픈소스화 됨

• Apple, Google 주도로 프로젝트 운영


WebKit Port

WebCore

WebKitMac WebKitWin WebKitGtk

WebCoreSupport

OSX/iOS

WebKitQt/EFLWebKitChromium

Windows GTK+ Android Chromium

• WindowsCE, Brew

• wxWidget, Haiku(BeOS) 지원

JavaScriptCore

QT EFL


누가 사용하는가 ?


WebKit Maintainers

Apple 57 31%

Google 64 35%

Nokia 7 4%RIM 3 2%

etc 50 28%

AppleGoogleNokiaRIMetc

http://trac.webkit.org/wiki/WebKit%20Team

2010.7


어떻게 참여하는가 ?

공개 버그 데이터베이스bugs.webkit.org

공개 소스 저장소svn.webkit.org

웹사이트와 블로그webkit.org

IRC 채널#webkit

irc.freenode.net

메일링 리스트lists.webkit.org

일일 빌드 다운로드nightly.webkit.org

Safari and WebKit Overview, Session 325 - WWDC2008


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


WebKit 의 주요 특징

11 Future Web Forum 2010

Browser 성능

• Chrome JavaScript 성능이 가장 우수

• Graphic 성능은 IE9.0 이 가장 우수

SunSpider(ms)

V8 benchmark

Dromaeobenchmark

Flying images

Safari5.0(SquirrelFish)

383 2,490 235 3

Chrome 5.0(V8)

379 5,151 6,541 3

IE 8.0 4,850 106 Failed 5

IE 9.0 612 837 150 64Firefox3.6

(TraceMonkey)

984 464 98 12

Opera10 413 3,296 2,625 28

arstechnica.com http://bit.ly/aTDRA9

Windows 7 에서 수행

12 Future Web Forum 2010

Video 지원

Codecs IE FirefoxSafar

iChrome 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


Chrome Extension

● Chrome 4.0 부터 Extension 지원

• JSON 형식으로 manifest 파일 정의

• 웹기술 이용하여 쉽게 개발 가능

• 브라우저와 다른 프로세스로 동작

https://chrome.google.com/extensions


Safari Extension

• Safari 5.0.1 부터 지원

• HTML5, CSS3, JavaScript 로 개발

• 바로 설치하여 사용 가능

• Extension 용 JavaScript API 제공


개발 툴

• DOM, CSS 수정

• Resource Loading,

Rendering Profiling 가능

• Cookie, Local Storage,

Client-Side Database 보기

• JavaScript Debugger


모바일 지원 현황


Viewport Meta Tags

• 웹페이지가 화면 크기에

잘 맞도록 지원

• 기본 Viewport width

= 980px


Viewport meta tag

<meta name = "viewport" content = "width = device-width" user-scalable=no>


CSS Viewport


CSS Viewport Example


Fast Mobile Scrolling

• Ignore the CSS property "background-

attachment: fixed" to make scrolling faster

http://www.w3schools.com/Css/tryit.asp?filename=trycss_background-attachment

http://www.w3schools.com/Css/tryit.asp?filename=trycss_background-attachment


Tiled Backing Store

• Viewport 를 tile 로 나눔• 한번 그린 영역은 보관• 보이지 않는 주변 영역을 미리 그림

http://froystig.wordpress.com/2009/08/20/rendering-with-tiles-in-fennec/


Spatial Navigation 지원

• Focusable element 를 key 로 이동하는 기능

• Non-touch mobile browser 를 위해 필요

• 마우스 사용이 불편한 사람에게 필요


웹표준 구현 현황


HTML5 Parser

• 모든 브라우저가 같은 방식으로

파싱

• Invalid HTML 을 동일하게 처리

• SVG 와 MathML in HTML

• Gecko2.0, WebKit nightly build 에

적용

?

Invalid


출처 : 실전 HTML5 가이드


<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>


HTML5 Video

• 자막

– Media Multitrack API

• Full screen

http://www.w3.org/WAI/PF/HTML/wiki/Media_MultitrackAPI


<a ping>

• URL 을 접근할 때 , 함께 접근할 ping 속성 지정

• Redirect 없이 User tracking 가능

• 웹페이지 접근 성능 향상

• <a>, <area> tag 에서 사용


css ime-mode property

<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


#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;}


User Interface 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


Device Orientation & Motion Event

http://dev.w3.org/geo/api/spec-source-orientation.html


Web Audio

• 오디오를 처리하고 합성하는 JS API 제공

• Canvas, WebGL 과 함께 사용

• 게임 등에 활용 가능http://chromium.googlecode.com/svn/trunk/samples/audio/specification/specification.html


Web Audio example

var context = new AudioContext();

function playSound() { var source = context.createBufferSource(); source.buffer = dogBarkingBuffer; source.connect(context.destination); source.noteOn(0);}


IndexedDB

• WebStorage

– localStorage, sessionStorage

• Web SQL Database(Client-side database)

– SQLite 에 의존적

• IndexedDB 표준화

– JS API 로 큰 크기의 structured data 관리 가능

– Mozilla, WebKit 일부 구현 , IE 구현 예정


IME Composition Events


WebKit 의 미래


Multiple Process 지원

• 목적

– UI 반응성 향상

– Content 에 의한 Crash 방지

– 전반적인 성능 향상

– Multi-Core 지원

– 보안성 강화

• 단점

– 메모리를 많이 사용함

– 포팅이 어렵다

W W W

Tab Tab Tab

UI Process

Web Process


기본 동작

• 서로 다른 프로세스에서 Rendering 과 화면 출력을 수행

Web Process(Rendering

Engine)

UI Process

Layout Engine

JS Engine

Shared Memory

Browser UI

Off Screen surface


WebKit2

http://trac.webkit.org/wiki/WebKit2


그래픽 하드웨어 가속

• 목적

– 그래픽 및 브라우저 성능 향상

– WebGL, CSS 3D transforms 가속

• 방법

– CPU 대신 GPU 를 이용하여 연산

– 불필요한 데이터 복사를 줄인다

• Video memory <==> System memory

– GPU 에서 Compositing 한다


하드웨어 가속 아키텍쳐

• 2D 가속 (Vector Graphic Engine, Image Processing, Font Caching)

• 3D 가속 (WebGL, CSS 3D transform)

• 비디오 처리 (HW codec, Color space 변환 )

• Video Memory 에 바로 Rendering


Q&A

webkit at the future web forum 2010

Technology

css viewpor

embed svg

active window

window

html

viewpor

svg

magnifier