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.

Like this presentation? Why not share!

Like this? Share it with your network

Share

浏览器渲染与web前端开发

  • 7,658 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
7,658
On Slideshare
6,411
From Embeds
1,247
Number of Embeds
12

Actions

Shares
Downloads
351
Comments
0
Likes
31

Embeds 1,247

http://www.baiduux.com 1,102
http://blog.netyc.cn 51
http://baidutech.blog.51cto.com 33
http://xianguo.com 24
http://static.slidesharecdn.com 16
http://reader.youdao.com 11
http://www.uxren.com 4
https://www.linkedin.com 2
http://zhuaxia.com 1
http://www.designcss.org 1
http://common.hao123.com 1
http://www.itfeed.cn 1

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