• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

浏览器渲染与web前端开发

  • 6,820 views
Uploaded on

百度web前端研发部2010年10月在电子科技大学的技术交流

百度web前端研发部2010年10月在电子科技大学的技术交流

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,820
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
351
Comments
0
Likes
31

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. WEB nwind
  • 2. Outline • Web • HTML • •
  • 3. FrontEnd
  • 4. Web • • html css javascript flash php
  • 5. Outline • Web • HTML • •
  • 6. CSS HTML ...
  • 7. HTML • • • • ...
  • 8. Widget
  • 9. Smartphone Apps using the Web Standards you already know
  • 10. User Interface Everywhere using the Web Standards you already know
  • 11. Outline • Web • HTML • •
  • 12. Webkit engine
  • 13. WebKit • is an engine, not a browser • forked from KHTML • 10% market share
  • 14. WebKit begins where the chrome ends http://webkit.org/blog/101/back-to-basics/
  • 15. What uses WebKit
  • 16. WebKit engine features • standards compliance (css3, html5) • performance • clear, maintainable code
  • 17. WebKit Components • WebKit • front-end layer, gtk/mac/qt/win/wx • WebCore • rendering, layout, painting... • JavaScriptCore • JavaScript engine (interpreter)
  • 18. WebKit API
  • 19. WebKit UI Process Application API Boundary WebKit WebCore JavaScriptCore
  • 20. WebKit API • webcore • webcore • • •
  • 21. WebKit API • mac • qt • gtk • win • wx • chromium • ...
  • 22. WebKit mac #include  <WebKit/WebKit.h>
  • 23. WebKit development • WebView WebFrame WebPreferences... • Delegate • DOM API • using javascript
  • 24. WebView API • loadRequest() • reload() • goBack() / goForward() • makeTextLarger() / makeTextSmaller()
  • 25. Delegate • WebFrameLoad • didFailLoadWithError:forFrame • WebPolicy • decidePolicyForNewWindowAction • WebResourceLoad • didFinishLoading • WebUI
  • 26. DOM API • W3C DOM Specification • [[doc documentElement] innerHTML]
  • 27. Call Javascript • id  win  =  [webView  windowScriptObject]; • [win  evaluateWebScript:@"location.href"];
  • 28. WebKit demo
  • 29. WebKit Components • WebKit • front-end layer, gtk/mac/qt/win/wx • WebCore • rendering, layout, painting... • JavaScriptCore • JavaScript engine (interpreter)
  • 30. WebCore Loading Painting Parsing Rendering Layout Script Execution Event Handling Style Resolution
  • 31. Process Loading Parsing Rending layout Painting
  • 32. Loading • , • • Frames • Resources
  • 33. Loading is complexity • • , • Cache • HTTP •
  • 34. http://webkit.org/blog/1188/how-webkit-loads-a-web-page/
  • 35. Process Loading Parsing Rending layout Painting
  • 36. Parsing • • DOM • •
  • 37. DOM Tree
  • 38. Process Loading Parsing Rending layout Painting
  • 39. Rending • Selector • Render Tree • CSS • RenderObject.h
  • 40. Selector matching
  • 41. Render Tree • • display:none DOM • • •
  • 42. Render Tree
  • 43. Process Loading Parsing Rending layout Painting
  • 44. Layout • render layout • input •
  • 45. Process Loading Parsing Rending layout Painting
  • 46. Painting • root • • 2D API
  • 47. overview (Gecko)
  • 48. Event Handling • • (hitTest) • layout • layout ( , ) • painting
  • 49. Event Example • -­‐[WebHTMLView  mouseUp:] • WebCore::EventHandler::mouseUp • WebCore::EventHandler::handleMouseReleaseEvent • WebCore::EventHandler::prepareMouseEvent • WebCore::Document::preperMouseEvent • WebCore::RenderLayer::hitTest • WebCore::RenderLayer::hitTestLayer
  • 50. Event System (Mac)
  • 51. Dynamic changes
  • 52. el.style.left = "2px"; el.style.left = el.offsetLeft + "px";
  • 53. Outline • Web • HTML • •
  • 54. Browsers
  • 55. Browser features tab
  • 56. • /hook • DOM API • • html •
  • 57. Chrome [OS]
  • 58. Chrome • Multi-process • WebKit glue • Skia • Network • Extension • Update
  • 59. Multi-process Architecture • browser as an operating system • asynchronous • backing store • sandbox
  • 60. Multi-process Architecture UI Process Application (Host Process Web Process Application (Render Process) API Boundary WebKit WebCore JavaScriptCore
  • 61. Chrome multi-process architecture IPC IPC
  • 62. Other Process Model • WebKit2 • IE8 “Loosely-Coupled IE”, “Gazelle” • Firefox “Electrolysis”
  • 63. WebKit2 • build in separate process • no-blocking API
  • 64. WebKit2 UI Process Application API Boundary WebKit (UI Process) Web Process WebKit (Web Process) WebCore JavaScriptCore
  • 65. WebKit WebKit2 Chrome UI Process UI Process UI Process Application Application Application WebKit WebKit Web Process Web Process Application WebCore WebKit WebKit WebCore WebCore JavaScriptCore JavaScriptCore JavaScriptCore
  • 66. WebKit glue • "WebKit embedding layer" • GUI • Chrome WebKit
  • 67. Chrome layers Browser window Tab contents Render host Renderer WebKit glue WebKit port WebKit
  • 68. Skia • GDI is not enough • GDI+ is no longer support and is slow • in-house solution • use GDI for text
  • 69. Network • Rewrite Network Stack • DNS Prefetching • SPDY
  • 70. Extensions • can use javascript • html5, css3 • donʼt need restart • NPAPI • not sandbox • Native Client
  • 71. SandBox
  • 72. Firefox (Gecko)
  • 73. Firefox (Gecko) • not just a browser • mail, newsgroup, web design tool... • complexity • XPCOM, XUL • mozilla 2
  • 74. Komodo
  • 75. Thunderbird
  • 76. Internet Explorer (Trident)
  • 77. IE shells (MSHTML) • 360 • theworld, • • • , UI • • • webkit/IE
  • 78. • HTML5 CSS3 ES5 SVG • GPU • Chakra inside
  • 79. References http://trac.webkit.org/wiki/ http://www.chromium.org/developers/ http://dbaron.org/talks/ http://trac.webkit.org/wiki/WebKit2
  • 80. WEB _Web 2011 http://hr.baidu.com/www/campusPro.action?l=7
  • 81. http://www.baiduux.com
  • 82. Thank you