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%
Apple
Google
Nokia
RIM
etc
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 - WWDC2

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 의 주요 특징

Browser 성능
• Chrome JavaScript 성능이 가장 우수
• Graphic 성능은 IE9.0이 가장 우수
SunSpider
(ms)
V8
benchmark
Dromaeo
benchmark
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 64
Firefox3.6
(TraceMonkey
)
984 464 98 12
Opera10 413 3,296 2,625 28
arstechnica.com
Windows 7 에서 수행

Video 지원
Codecs IE Firefox
Safar
i
Chrome Opera
iPhon
e
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/extens

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

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 에
적용
?
Invali
d

출처 : 실전 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>

HTML5 Video
• 자막
– Media Multitrack API
• Full screen
http://www.w3.org/WAI/PF/HTML/wiki/Media_Multitra
ckAPI

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

Web Audio
• 오디오를 처리하고 합성하는 JS API 제공
• Canvas, WebGL 과 함께 사용
• 게임 등에 활용 가능
http://chromium.googlecode.com/svn/trunk/samples/a
udio/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/Web
Kit2

그래픽 하드웨어 가속
• 목적
– 그래픽 및 브라우저 성능 향상
– 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

WebKit at the Future Web Forum 2010

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie WebKit at the Future Web Forum 2010

Ähnlich wie WebKit at the Future Web Forum 2010 (20)

Mehr von Joone Hur

Mehr von Joone Hur (10)

WebKit at the Future Web Forum 2010