Your SlideShare is downloading. ×
浏览器渲染与web前端开发
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

浏览器渲染与web前端开发

7,028
views

Published on

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

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

Published in: Technology, Design

0 Comments
33 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,028
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
353
Comments
0
Likes
33
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. 百度视频
  • 6. 内部平台
  • 7. Outline • 百度Web前端研发部 • HTML布局无处不在 • 渲染引擎 • 浏览器
  • 8. 当CSS和HTML越来越丰富时...
  • 9. HTML布局将无处不在 • 悄悄融入到各种桌面应用中 • 成为程序的插件 • 本地应用 • 各种其它设备...
  • 10. 嵌入到桌面应用
  • 11. Widget
  • 12. Smartphone Apps using the Web Standards you already know
  • 13. User Interface Everywhere using the Web Standards you already know
  • 14. Outline • 百度Web前端研发部 • HTML布局无处不在 • 渲染引擎 • 浏览器
  • 15. Webkit engine
  • 16. WebKit渲染引擎 • is an engine, not a browser • forked from KHTML • 10% market share
  • 17. WebKit begins where the chrome ends http://webkit.org/blog/101/back-to-basics/
  • 18. What uses WebKit
  • 19. WebKit engine features • standards compliance (css3, html5) • performance • clear, maintainable code
  • 20. WebKit Components • WebKit • front-end layer, gtk/mac/qt/win/wx • WebCore • rendering, layout, painting... • JavaScriptCore • JavaScript engine (interpreter)
  • 21. WebKit API
  • 22. Application WebCore WebKit JavaScriptCore WebKit API Boundary UI Process
  • 23. WebKit API • 封装对webcore的调用 • 为webcore提供平台相关的操作 • 网络调用 • 绘图 • 监听用户交互
  • 24. WebKit API • mac • qt • gtk • win • wx • chromium • ...
  • 25. WebKit mac #include  <WebKit/WebKit.h>
  • 26. WebKit development • WebView WebFrame WebPreferences... • Delegate • DOM API • using javascript
  • 27. WebView API • loadRequest() • reload() • goBack() / goForward() • makeTextLarger() / makeTextSmaller()
  • 28. Delegate • WebFrameLoad • didFailLoadWithError:forFrame • WebPolicy • decidePolicyForNewWindowAction • WebResourceLoad • didFinishLoading • WebUI
  • 29. DOM API • W3C DOM Specification • [[doc documentElement] innerHTML]
  • 30. Call Javascript • id  win  =  [webView  windowScriptObject]; • [win  evaluateWebScript:@"location.href"];
  • 31. WebKit demo
  • 32. WebKit Components • WebKit • front-end layer, gtk/mac/qt/win/wx • WebCore • rendering, layout, painting... • JavaScriptCore • JavaScript engine (interpreter)
  • 33. WebCore Parsing Loading Painting Rendering Script Execution Layout Style Resolution Event Handling
  • 34. Process Loading Parsing Rending layout Painting
  • 35. Loading • 网络, 本地 • 分为两种类型 • Frames 网页 • Resources 其它
  • 36. Loading is complexity • 调用网络接口 • 加载 解析 执行, 错综复杂的关系 • 各种Cache机制 • HTTP • 前进后退
  • 37. http://webkit.org/blog/1188/how-webkit-loads-a-web-page/
  • 38. Process Loading Parsing Rending layout Painting
  • 39. Parsing • 状态机 • 构建DOM树 • 建立节点的对象 • 各种出错情况处理
  • 40. DOM Tree
  • 41. Process Loading Parsing Rending layout Painting
  • 42. Rending • 依据Selector计算出节点的样式 • 生成Render Tree • 需等待CSS加载 • RenderObject.h
  • 43. Selector matching
  • 44. Render Tree • 只和展现相关 • 不关心display:none的DOM节点 • 将节点和样式关联起来 • 生成一些匿名节点 • 文字折行
  • 45. Render Tree
  • 46. Process Loading Parsing Rending layout Painting
  • 47. Layout • 从根节点递归调用render对象的layout方法 • 只有input框从子结点开始渲染 • 计算元素的大小及位置等信息
  • 48. Process Loading Parsing Rending layout Painting
  • 49. Painting • 从root元素开始 • 从底至顶一层层绘图 • 调用2D图形API
  • 50. overview (Gecko)
  • 51. Event Handling • 监听鼠标键盘事件 • 找到对应的元素(hitTest) • 设置需要layout的标志位 • layout (队列, 异步执行) • painting
  • 52. Event Example • -­‐[WebHTMLView  mouseUp:] • WebCore::EventHandler::mouseUp • WebCore::EventHandler::handleMouseReleaseEvent • WebCore::EventHandler::prepareMouseEvent • WebCore::Document::preperMouseEvent • WebCore::RenderLayer::hitTest • WebCore::RenderLayer::hitTestLayer
  • 53. Event System (Mac)
  • 54. Dynamic changes
  • 55. el.style.left = "2px"; el.style.left = el.offsetLeft + "px";
  • 56. Outline • 百度Web前端研发部 • HTML布局无处不在 • 渲染引擎 • 浏览器
  • 57. Browsers
  • 58. Browser features 起始页 tab管理 崩溃恢复 地址栏增强 广告拦截 超级拖拽 快速查找 下载管理 自动升级 防假死 智能填表 代理切换 屏幕截图 收藏管理 鼠标手势 安全检测 进程管理 皮肤 缩放 错误页 安全检测 在线升级 插件机制 账号绑定 快捷键 隐私浏览 清除纪录
  • 59. 基本实现方法 • 监听渲染引擎提供的事件/hook • 使用渲染引擎提供的DOM API • 如鼠标手势 • 有些功能可以直接用html • 如起始页
  • 60. Chrome [OS]
  • 61. Chrome • Multi-process • WebKit glue • Skia • Network • Extension • Update
  • 62. Multi-process Architecture • browser as an operating system • asynchronous • backing store • sandbox
  • 63. Multi-process Architecture Application (Host Process WebKit WebCore JavaScriptCore API Boundary UI Process Application (Render Process) Web Process
  • 64. Chrome multi-process architecture IPC IPC
  • 65. Other Process Model • WebKit2 • IE8 “Loosely-Coupled IE”, “Gazelle” • Firefox “Electrolysis”
  • 66. WebKit2 • build in separate process • no-blocking API
  • 67. WebKit2 Application WebKit (Web Process) WebCore JavaScriptCore API Boundary UI Process WebKit (UI Process) Web Process
  • 68. WebKit WebKit2 Chrome Application WebKit WebCore JavaScriptCore UI Process Application Web Process Application WebKit WebCore JavaScriptCore UI Process WebKit Web Process Application WebKit WebCore JavaScriptCore UI Process
  • 69. WebKit glue • "WebKit embedding layer" • 避免依赖各种GUI框架 • Chrome与WebKit的桥梁
  • 70. Chrome layers Browser window Tab contents Render host Renderer WebKit glue WebKitWebKit port
  • 71. Skia • GDI is not enough • GDI+ is no longer support and is slow • in-house solution • use GDI for text
  • 72. Network • Rewrite Network Stack • DNS Prefetching • SPDY
  • 73. Extensions • can use javascript • html5, css3 • donʼt need restart • NPAPI • not sandbox • Native Client
  • 74. SandBox
  • 75. Firefox (Gecko)
  • 76. Firefox (Gecko) • not just a browser • mail, newsgroup, web design tool... • complexity • XPCOM, XUL • mozilla 2
  • 77. Komodo
  • 78. Thunderbird
  • 79. Internet Explorer (Trident)
  • 80. IE shells (MSHTML) • 360安全浏览器 • 基于theworld, 基本上就是换了个肤 • 支持多进程模式 • 遨游浏览器 • 细节功能很多, UI不错 • 搜狗高速浏览器 • 全网加速 • webkit/IE双引擎
  • 81. • HTML5 CSS3 ES5 SVG • GPU • Chakra inside
  • 82. References http://trac.webkit.org/wiki/ http://www.chromium.org/developers/ http://dbaron.org/talks/ http://trac.webkit.org/wiki/WebKit2
  • 83. 欢迎加入百度WEB前端研发部! http://hr.baidu.com/www/campusPro.action?l=7 搜索研发部_Web前端研发工程师(2011校园招聘)
  • 84. http://www.baiduux.com
  • 85. Thank you

×