Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebKit at the Future Web Forum 2010

7,520 views

Published on

Published in: Technology

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

×