浏览器渲染与web前端开发
36 likes3,303 views
该文档讨论了浏览器渲染及其在Web前端开发中的重要性，特别是HTML布局与渲染引擎的关系。它介绍了WebKit引擎的组成、API及多进程架构，同时分析了加载、解析、渲染和事件处理的复杂过程。文档还提到了各种浏览器的功能与特性，强调前端开发的重要性和多样性。
![DOM API
• W3C DOM Specification
• [[doc documentElement] innerHTML]](https://image.slidesharecdn.com/webkitfe-101027023835-phpapp02/85/web-30-320.jpg)
![Call Javascript
• id
win
=
[webView
windowScriptObject];
• [win
evaluateWebScript:@"location.href"];](https://image.slidesharecdn.com/webkitfe-101027023835-phpapp02/85/web-31-320.jpg)
![Event Example
• -‐[WebHTMLView
mouseUp:]
• WebCore::EventHandler::mouseUp
• WebCore::EventHandler::handleMouseReleaseEvent
• WebCore::EventHandler::prepareMouseEvent
• WebCore::Document::preperMouseEvent
• WebCore::RenderLayer::hitTest
• WebCore::RenderLayer::hitTestLayer](https://image.slidesharecdn.com/webkitfe-101027023835-phpapp02/85/web-53-320.jpg)
![Chrome [OS]](https://image.slidesharecdn.com/webkitfe-101027023835-phpapp02/85/web-61-320.jpg)
浏览器渲染与web前端开发
- 2. Outline • 百度Web前端研发部 • HTML布局无处不在 • 渲染引擎 • 浏览器
- 4. FrontEnd
- 6. 百度视频
- 7. 内部平台
- 8. Outline • 百度Web前端研发部 • HTML布局无处不在 • 渲染引擎 • 浏览器
- 10. HTML布局将无处不在 • 悄悄融入到各种桌面应用中 • 成为程序的插件 • 本地应用 • 各种其它设备...
- 11. 嵌入到桌面应用
- 12. Widget
- 13. Smartphone Apps using the Web Standards you already know
- 14. User Interface Everywhere using the Web Standards you already know
- 15. Outline • 百度Web前端研发部 • HTML布局无处不在 • 渲染引擎 • 浏览器
- 16. Webkit engine
- 17. WebKit渲染引擎 • is an engine, not a browser • forked from KHTML • 10% market share
- 18. WebKit begins where the chrome ends http://webkit.org/blog/101/back-to-basics/
- 19. What uses WebKit
- 20. WebKit engine features • standards compliance (css3, html5) • performance • clear, maintainable code
- 21. WebKit Components • WebKit • front-end layer, gtk/mac/qt/win/wx • WebCore • rendering, layout, painting... • JavaScriptCore • JavaScript engine (interpreter)
- 22. WebKit API
- 24. WebKit API • 封装对webcore的调用 • 为webcore提供平台相关的操作 • 网络调用 • 绘图 • 监听用户交互
- 25. WebKit API • mac • qt • gtk • win • wx • chromium • ...
- 27. WebKit development • WebView WebFrame WebPreferences... • Delegate • DOM API • using javascript
- 28. WebView API • loadRequest() • reload() • goBack() / goForward() • makeTextLarger() / makeTextSmaller()
- 29. Delegate • WebFrameLoad • didFailLoadWithError:forFrame • WebPolicy • decidePolicyForNewWindowAction • WebResourceLoad • didFinishLoading • WebUI
- 30. DOM API • W3C DOM Specification • [[doc documentElement] innerHTML]
- 31. Call Javascript • id win = [webView windowScriptObject]; • [win evaluateWebScript:@"location.href"];
- 32. WebKit demo
- 33. WebKit Components • WebKit • front-end layer, gtk/mac/qt/win/wx • WebCore • rendering, layout, painting... • JavaScriptCore • JavaScript engine (interpreter)
- 34. WebCore Parsing Loading Painting Rendering Script Execution Layout Style Resolution Event Handling
- 36. Loading • 网络, 本地 • 分为两种类型 • Frames 网页 • Resources 其它
- 37. Loading is complexity • 调用网络接口 • 加载 解析 执行, 错综复杂的关系 • 各种Cache机制 • HTTP • 前进后退
- 40. Parsing • 状态机 • 构建DOM树 • 建立节点的对象 • 各种出错情况处理
- 41. DOM Tree
- 43. Rending • 依据Selector计算出节点的样式 • 生成Render Tree • 需等待CSS加载 • RenderObject.h
- 45. Render Tree • 只和展现相关 • 不关心display:none的DOM节点 • 将节点和样式关联起来 • 生成一些匿名节点 • 文字折行
- 46. Render Tree
- 48. Layout • 从根节点递归调用render对象的layout方法 • 只有input框从子结点开始渲染 • 计算元素的大小及位置等信息
- 50. Painting • 从root元素开始 • 从底至顶一层层绘图 • 调用2D图形API
- 51. overview (Gecko)
- 52. Event Handling • 监听鼠标键盘事件 • 找到对应的元素(hitTest) • 设置需要layout的标志位 • layout (队列, 异步执行) • painting
- 53. Event Example • -‐[WebHTMLView mouseUp:] • WebCore::EventHandler::mouseUp • WebCore::EventHandler::handleMouseReleaseEvent • WebCore::EventHandler::prepareMouseEvent • WebCore::Document::preperMouseEvent • WebCore::RenderLayer::hitTest • WebCore::RenderLayer::hitTestLayer
- 55. Dynamic changes
- 56. el.style.left = "2px"; el.style.left = el.offsetLeft + "px";
- 57. Outline • 百度Web前端研发部 • HTML布局无处不在 • 渲染引擎 • 浏览器
- 58. Browsers
- 60. 基本实现方法 • 监听渲染引擎提供的事件/hook • 使用渲染引擎提供的DOM API • 如鼠标手势 • 有些功能可以直接用html • 如起始页
- 61. Chrome [OS]
- 62. Chrome • Multi-process • WebKit glue • Skia • Network • Extension • Update
- 63. Multi-process Architecture • browser as an operating system • asynchronous • backing store • sandbox
- 64. Multi-process Architecture Application (Host Process WebKit WebCore JavaScriptCore API Boundary UI Process Application (Render Process) Web Process
- 66. Other Process Model • WebKit2 • IE8 “Loosely-Coupled IE”, “Gazelle” • Firefox “Electrolysis”
- 67. WebKit2 • build in separate process • no-blocking API
- 68. WebKit2 Application WebKit (Web Process) WebCore JavaScriptCore API Boundary UI Process WebKit (UI Process) Web Process
- 69. 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
- 70. WebKit glue • "WebKit embedding layer" • 避免依赖各种GUI框架 • Chrome与WebKit的桥梁
- 71. Chrome layers Browser window Tab contents Render host Renderer WebKit glue WebKitWebKit port
- 72. Skia • GDI is not enough • GDI+ is no longer support and is slow • in-house solution • use GDI for text
- 73. Network • Rewrite Network Stack • DNS Prefetching • SPDY
- 74. Extensions • can use javascript • html5, css3 • donʼt need restart • NPAPI • not sandbox • Native Client
- 75. SandBox
- 76. Firefox (Gecko)
- 77. Firefox (Gecko) • not just a browser • mail, newsgroup, web design tool... • complexity • XPCOM, XUL • mozilla 2
- 78. Komodo
- 79. Thunderbird
- 81. IE shells (MSHTML) • 360安全浏览器 • 基于theworld, 基本上就是换了个肤 • 支持多进程模式 • 遨游浏览器 • 细节功能很多, UI不错 • 搜狗高速浏览器 • 全网加速 • webkit/IE双引擎
- 82. • HTML5 CSS3 ES5 SVG • GPU • Chakra inside
- 86. Thank you