0
WebKit
허준회 (@joone_net)
http://opensoftware.kr
2Future Web Forum 2010
오늘의 이야기
• WebKit Project 소개
• 주요 특징
• 모바일 및 웹표준 지원 현황
• 앞으로의 미래
3Future Web Forum 2010
WeKit Project
• 오픈소스 웹 엔진
• 2 백만 라인 코드 , 대부분 C+
+
• ~10 % 브라우저가 사용
• 150 명 커미터
• LGPL, BSD License
4Future Web Forum 2010
WebKit 의 시작
• KDE Project 에서 KHTML/KJS 로 시작
• Apple 에서 Fork 하여 2001 년 부터 개발 시작
• 2005 년 오픈소스화 됨
• A...
5Future Web Forum 2010
WebKit Port
WebCore
WebKitMac WebKitWin WebKitGtk
WebCoreSupport
OSX/iOS
WebKitQt/EFLWebKitChromium...
6Future Web Forum 2010
누가 사용하는가 ?
7Future Web Forum 2010
WebKit Maintainers
Apple 57 31%
Google 64 35%
Nokia 7 4%
RIM 3 2%
etc 50 28%
Apple
Google
Nokia
RIM...
8Future Web Forum 2010
어떻게 참여하는가 ?
공개 버그 데이터베이스
bugs.webkit.org
공개 소스 저장소
svn.webkit.org
웹사이트와 블로그
webkit.org
IRC 채널
#webk...
9Future Web Forum 2010
Webkit 의 발전 속도
• Bug 8007 → 2006-03-27
• Bug 18000 → 2008-03-21
• Bug 28000 → 2009-08-04
• Bug 3800...
10Future Web Forum 2010
WebKit 의 주요 특징
11Future Web Forum 2010
Browser 성능
• Chrome JavaScript 성능이 가장 우수
• Graphic 성능은 IE9.0이 가장 우수
SunSpider
(ms)
V8
benchmark
Dr...
12Future Web Forum 2010
Video 지원
Codecs IE Firefox
Safar
i
Chrome Opera
iPhon
e
Android
Theora . 3.5+ . 5.0+ 10.5+ . .
H.2...
13Future Web Forum 2010
Chrome Extension
●
Chrome 4.0 부터 Extension 지원
• JSON 형식으로 manifest 파일 정의
• 웹기술 이용하여 쉽게 개발 가능
• 브라우...
14Future Web Forum 2010
Safari Extension
• Safari 5.0.1 부터 지원
• HTML5, CSS3, JavaScript 로 개발
• 바로 설치하여 사용 가능
• Extension 용...
15Future Web Forum 2010
개발 툴
• DOM, CSS 수정
• Resource Loading,
Rendering Profiling 가능
• Cookie, Local Storage,
Client-Side...
16Future Web Forum 2010
모바일 지원 현황
17Future Web Forum 2010
Viewport Meta Tags
• 웹페이지가 화면 크기에
잘 맞도록 지원
• 기본 Viewport width
= 980px
18Future Web Forum 2010
Viewport meta tag
<meta name = "viewport" content = "width = device-width"
user-scalable=no>
19Future Web Forum 2010
CSS Viewport
20Future Web Forum 2010
CSS Viewport Example
21Future Web Forum 2010
Fast Mobile Scrolling
• Ignore the CSS property "background-
attachment: fixed" to make scrolling ...
22Future Web Forum 2010
Tiled Backing Store
• Viewport 를 tile 로 나눔
• 한번 그린 영역은 보관
• 보이지 않는 주변 영역을 미리 그림
http://froystig.wo...
23Future Web Forum 2010
Spatial Navigation 지원
• Focusable element 를 key 로 이동하는 기능
• Non-touch mobile browser 를 위해 필요
• 마우스...
24Future Web Forum 2010
웹표준 구현 현황
25Future Web Forum 2010
HTML5 Parser
• 모든 브라우저가 같은 방식으로
파싱
• Invalid HTML 을 동일하게 처리
• SVG 와 MathML in HTML
• Gecko2.0, Web...
26Future Web Forum 2010
출처 : 실전 HTML5 가이드
27Future Web Forum 2010
<li><em>SVG and MathML in HTML</em>. One of the cool new
features of the HTML5 parsing algorithm i...
28Future Web Forum 2010
29Future Web Forum 2010
HTML5 Video
• 자막
– Media Multitrack API
• Full screen
http://www.w3.org/WAI/PF/HTML/wiki/Media_Mul...
30Future Web Forum 2010
<a ping>
• URL 을 접근할 때 , 함께 접근할 ping 속성 지정
• Redirect 없이 User tracking 가능
• 웹페이지 접근 성능 향상
• <a>, <...
31Future Web Forum 2010
css ime-mode property
<ul>
<li>ime-mode:active :
<input type="text" size="20" style="ime-mode:acti...
32Future Web Forum 2010
#search .input_text{width:323px;height:17px;line-height:16px;margin:5px
0 0 6px;border:0 none;font...
33Future Web Forum 2010
User Interface Independence for
Accessible Rich Internet
Applications
• ScreenReader Interface
– w...
34Future Web Forum 2010
Device Orientation & Motion Event
http://dev.w3.org/geo/api/spec-source-
35Future Web Forum 2010
Web Audio
• 오디오를 처리하고 합성하는 JS API 제공
• Canvas, WebGL 과 함께 사용
• 게임 등에 활용 가능
http://chromium.googlec...
36Future Web Forum 2010
Web Audio example
var context = new AudioContext();
function playSound() {
var source = context.cr...
37Future Web Forum 2010
IndexedDB
• WebStorage
– localStorage, sessionStorage
• Web SQL Database(Client-side database)
– S...
38Future Web Forum 2010
IME Composition Events
39Future Web Forum 2010
WebKit 의 미래
40Future Web Forum 2010
Multiple Process 지원
• 목적
– UI 반응성 향상
– Content 에 의한 Crash 방지
– 전반적인 성능 향상
– Multi-Core 지원
– 보안성 강화...
41Future Web Forum 2010
기본 동작
•
서로 다른 프로세스에서 Rendering과 화면 출력을 수행
Web Process
(Rendering
Engine)
UI Process
Layout Engine
...
42Future Web Forum 2010
WebKit2
http://trac.webkit.org/wiki/Web
Kit2
43Future Web Forum 2010
그래픽 하드웨어 가속
• 목적
– 그래픽 및 브라우저 성능 향상
– WebGL, CSS 3D transforms 가속
• 방법
– CPU 대신 GPU 를 이용하여 연산
– 불필...
44Future Web Forum 2010
하드웨어 가속 아키텍쳐
• 2D 가속 (Vector Graphic Engine, Image Processing, Font Caching)
• 3D 가속 (WebGL, CSS 3...
45Future Web Forum 2010
Q&A
Upcoming SlideShare
Loading in...5
×

WebKit at the Future Web Forum 2010

6,099

Published on

Published in: Technology
3 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,099
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
78
Comments
3
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "WebKit at the Future Web Forum 2010"

  1. 1. WebKit 허준회 (@joone_net) http://opensoftware.kr
  2. 2. 2Future Web Forum 2010 오늘의 이야기 • WebKit Project 소개 • 주요 특징 • 모바일 및 웹표준 지원 현황 • 앞으로의 미래
  3. 3. 3Future Web Forum 2010 WeKit Project • 오픈소스 웹 엔진 • 2 백만 라인 코드 , 대부분 C+ + • ~10 % 브라우저가 사용 • 150 명 커미터 • LGPL, BSD License
  4. 4. 4Future Web Forum 2010 WebKit 의 시작 • KDE Project 에서 KHTML/KJS 로 시작 • Apple 에서 Fork 하여 2001 년 부터 개발 시작 • 2005 년 오픈소스화 됨 • Apple, Google 주도로 프로젝트 운영
  5. 5. 5Future Web Forum 2010 WebKit Port WebCore WebKitMac WebKitWin WebKitGtk WebCoreSupport OSX/iOS WebKitQt/EFLWebKitChromium Windows GTK+ Android Chromium • WindowsCE, Brew • wxWidget, Haiku(BeOS) 지원 JavaScriptCore QT EFL
  6. 6. 6Future Web Forum 2010 누가 사용하는가 ?
  7. 7. 7Future Web Forum 2010 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
  8. 8. 8Future Web Forum 2010 어떻게 참여하는가 ? 공개 버그 데이터베이스 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
  9. 9. 9Future Web Forum 2010 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
  10. 10. 10Future Web Forum 2010 WebKit 의 주요 특징
  11. 11. 11Future Web Forum 2010 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 에서 수행
  12. 12. 12Future Web Forum 2010 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
  13. 13. 13Future Web Forum 2010 Chrome Extension ● Chrome 4.0 부터 Extension 지원 • JSON 형식으로 manifest 파일 정의 • 웹기술 이용하여 쉽게 개발 가능 • 브라우저와 다른 프로세스로 동작 https://chrome.google.com/extens
  14. 14. 14Future Web Forum 2010 Safari Extension • Safari 5.0.1 부터 지원 • HTML5, CSS3, JavaScript 로 개발 • 바로 설치하여 사용 가능 • Extension 용 JavaScript API 제공
  15. 15. 15Future Web Forum 2010 개발 툴 • DOM, CSS 수정 • Resource Loading, Rendering Profiling 가능 • Cookie, Local Storage, Client-Side Database 보기 • JavaScript Debugger
  16. 16. 16Future Web Forum 2010 모바일 지원 현황
  17. 17. 17Future Web Forum 2010 Viewport Meta Tags • 웹페이지가 화면 크기에 잘 맞도록 지원 • 기본 Viewport width = 980px
  18. 18. 18Future Web Forum 2010 Viewport meta tag <meta name = "viewport" content = "width = device-width" user-scalable=no>
  19. 19. 19Future Web Forum 2010 CSS Viewport
  20. 20. 20Future Web Forum 2010 CSS Viewport Example
  21. 21. 21Future Web Forum 2010 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
  22. 22. 22Future Web Forum 2010 Tiled Backing Store • Viewport 를 tile 로 나눔 • 한번 그린 영역은 보관 • 보이지 않는 주변 영역을 미리 그림 http://froystig.wordpress.com/2009/08/20/rendering-with-tiles-in- fennec/
  23. 23. 23Future Web Forum 2010 Spatial Navigation 지원 • Focusable element 를 key 로 이동하는 기능 • Non-touch mobile browser 를 위해 필요 • 마우스 사용이 불편한 사람에게 필요
  24. 24. 24Future Web Forum 2010 웹표준 구현 현황
  25. 25. 25Future Web Forum 2010 HTML5 Parser • 모든 브라우저가 같은 방식으로 파싱 • Invalid HTML 을 동일하게 처리 • SVG 와 MathML in HTML • Gecko2.0, WebKit nightly build 에 적용 ? Invali d
  26. 26. 26Future Web Forum 2010 출처 : 실전 HTML5 가이드
  27. 27. 27Future Web Forum 2010 <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 &lt;svg&gt; 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>
  28. 28. 28Future Web Forum 2010
  29. 29. 29Future Web Forum 2010 HTML5 Video • 자막 – Media Multitrack API • Full screen http://www.w3.org/WAI/PF/HTML/wiki/Media_Multitra ckAPI
  30. 30. 30Future Web Forum 2010 <a ping> • URL 을 접근할 때 , 함께 접근할 ping 속성 지정 • Redirect 없이 User tracking 가능 • 웹페이지 접근 성능 향상 • <a>, <area> tag 에서 사용
  31. 31. 31Future Web Forum 2010 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
  32. 32. 32Future Web Forum 2010 #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;}
  33. 33. 33Future Web Forum 2010 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
  34. 34. 34Future Web Forum 2010 Device Orientation & Motion Event http://dev.w3.org/geo/api/spec-source-
  35. 35. 35Future Web Forum 2010 Web Audio • 오디오를 처리하고 합성하는 JS API 제공 • Canvas, WebGL 과 함께 사용 • 게임 등에 활용 가능 http://chromium.googlecode.com/svn/trunk/samples/a udio/specification/specification.html
  36. 36. 36Future Web Forum 2010 Web Audio example var context = new AudioContext(); function playSound() { var source = context.createBufferSource(); source.buffer = dogBarkingBuffer; source.connect(context.destination); source.noteOn(0); }
  37. 37. 37Future Web Forum 2010 IndexedDB • WebStorage – localStorage, sessionStorage • Web SQL Database(Client-side database) – SQLite 에 의존적 • IndexedDB 표준화 – JS API 로 큰 크기의 structured data 관리 가능 – Mozilla, WebKit 일부 구현 , IE 구현 예정
  38. 38. 38Future Web Forum 2010 IME Composition Events
  39. 39. 39Future Web Forum 2010 WebKit 의 미래
  40. 40. 40Future Web Forum 2010 Multiple Process 지원 • 목적 – UI 반응성 향상 – Content 에 의한 Crash 방지 – 전반적인 성능 향상 – Multi-Core 지원 – 보안성 강화 • 단점 – 메모리를 많이 사용함 – 포팅이 어렵다 W W W Tab Tab Tab UI Process Web Process
  41. 41. 41Future Web Forum 2010 기본 동작 • 서로 다른 프로세스에서 Rendering과 화면 출력을 수행 Web Process (Rendering Engine) UI Process Layout Engine JS Engine Shared Memory Browser UI Off Screen surface
  42. 42. 42Future Web Forum 2010 WebKit2 http://trac.webkit.org/wiki/Web Kit2
  43. 43. 43Future Web Forum 2010 그래픽 하드웨어 가속 • 목적 – 그래픽 및 브라우저 성능 향상 – WebGL, CSS 3D transforms 가속 • 방법 – CPU 대신 GPU 를 이용하여 연산 – 불필요한 데이터 복사를 줄인다 • Video memory <==> System memory – GPU 에서 Compositing 한다
  44. 44. 44Future Web Forum 2010 하드웨어 가속 아키텍쳐 • 2D 가속 (Vector Graphic Engine, Image Processing, Font Caching) • 3D 가속 (WebGL, CSS 3D transform) • 비디오 처리 (HW codec, Color space 변환) • Video Memory에 바로 Rendering
  45. 45. 45Future Web Forum 2010 Q&A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×