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. 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. 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
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. 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. 13Future Web Forum 2010
Chrome Extension
●
Chrome 4.0 부터 Extension 지원
• JSON 형식으로 manifest 파일 정의
• 웹기술 이용하여 쉽게 개발 가능
• 브라우저와 다른 프로세스로 동작
https://chrome.google.com/extens
14. 14Future Web Forum 2010
Safari Extension
• Safari 5.0.1 부터 지원
• HTML5, CSS3, JavaScript 로 개발
• 바로 설치하여 사용 가능
• Extension 용 JavaScript API 제공
15. 15Future Web Forum 2010
개발 툴
• DOM, CSS 수정
• Resource Loading,
Rendering Profiling 가능
• Cookie, Local Storage,
Client-Side Database 보기
• JavaScript Debugger
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. 22Future Web Forum 2010
Tiled Backing Store
• Viewport 를 tile 로 나눔
• 한번 그린 영역은 보관
• 보이지 않는 주변 영역을 미리 그림
http://froystig.wordpress.com/2009/08/20/rendering-with-tiles-in-
fennec/
23. 23Future Web Forum 2010
Spatial Navigation 지원
• Focusable element 를 key 로 이동하는 기능
• Non-touch mobile browser 를 위해 필요
• 마우스 사용이 불편한 사람에게 필요
25. 25Future Web Forum 2010
HTML5 Parser
• 모든 브라우저가 같은 방식으로
파싱
• Invalid HTML 을 동일하게 처리
• SVG 와 MathML in HTML
• Gecko2.0, WebKit nightly build 에
적용
?
Invali
d
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
<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>
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. 34Future Web Forum 2010
Device Orientation & Motion Event
http://dev.w3.org/geo/api/spec-source-
35. 35Future Web Forum 2010
Web Audio
• 오디오를 처리하고 합성하는 JS API 제공
• Canvas, WebGL 과 함께 사용
• 게임 등에 활용 가능
http://chromium.googlecode.com/svn/trunk/samples/a
udio/specification/specification.html
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. 37Future Web Forum 2010
IndexedDB
• WebStorage
– localStorage, sessionStorage
• Web SQL Database(Client-side database)
– SQLite 에 의존적
• IndexedDB 표준화
– JS API 로 큰 크기의 structured data 관리 가능
– Mozilla, WebKit 일부 구현 , IE 구현 예정
40. 40Future Web Forum 2010
Multiple Process 지원
• 목적
– UI 반응성 향상
– Content 에 의한 Crash 방지
– 전반적인 성능 향상
– Multi-Core 지원
– 보안성 강화
• 단점
– 메모리를 많이 사용함
– 포팅이 어렵다
W W W
Tab Tab Tab
UI Process
Web
Process
41. 41Future Web Forum 2010
기본 동작
•
서로 다른 프로세스에서 Rendering과 화면 출력을 수행
Web Process
(Rendering
Engine)
UI Process
Layout Engine
JS Engine
Shared Memory
Browser UI
Off Screen
surface
43. 43Future Web Forum 2010
그래픽 하드웨어 가속
• 목적
– 그래픽 및 브라우저 성능 향상
– WebGL, CSS 3D transforms 가속
• 방법
– CPU 대신 GPU 를 이용하여 연산
– 불필요한 데이터 복사를 줄인다
• Video memory <==> System memory
– GPU 에서 Compositing 한다
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