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

of

浏览器渲染与web前端开发 Slide 1 浏览器渲染与web前端开发 Slide 2 浏览器渲染与web前端开发 Slide 3 浏览器渲染与web前端开发 Slide 4 浏览器渲染与web前端开发 Slide 5 浏览器渲染与web前端开发 Slide 6 浏览器渲染与web前端开发 Slide 7 浏览器渲染与web前端开发 Slide 8 浏览器渲染与web前端开发 Slide 9 浏览器渲染与web前端开发 Slide 10 浏览器渲染与web前端开发 Slide 11 浏览器渲染与web前端开发 Slide 12 浏览器渲染与web前端开发 Slide 13 浏览器渲染与web前端开发 Slide 14 浏览器渲染与web前端开发 Slide 15 浏览器渲染与web前端开发 Slide 16 浏览器渲染与web前端开发 Slide 17 浏览器渲染与web前端开发 Slide 18 浏览器渲染与web前端开发 Slide 19 浏览器渲染与web前端开发 Slide 20 浏览器渲染与web前端开发 Slide 21 浏览器渲染与web前端开发 Slide 22 浏览器渲染与web前端开发 Slide 23 浏览器渲染与web前端开发 Slide 24 浏览器渲染与web前端开发 Slide 25 浏览器渲染与web前端开发 Slide 26 浏览器渲染与web前端开发 Slide 27 浏览器渲染与web前端开发 Slide 28 浏览器渲染与web前端开发 Slide 29 浏览器渲染与web前端开发 Slide 30 浏览器渲染与web前端开发 Slide 31 浏览器渲染与web前端开发 Slide 32 浏览器渲染与web前端开发 Slide 33 浏览器渲染与web前端开发 Slide 34 浏览器渲染与web前端开发 Slide 35 浏览器渲染与web前端开发 Slide 36 浏览器渲染与web前端开发 Slide 37 浏览器渲染与web前端开发 Slide 38 浏览器渲染与web前端开发 Slide 39 浏览器渲染与web前端开发 Slide 40 浏览器渲染与web前端开发 Slide 41 浏览器渲染与web前端开发 Slide 42 浏览器渲染与web前端开发 Slide 43 浏览器渲染与web前端开发 Slide 44 浏览器渲染与web前端开发 Slide 45 浏览器渲染与web前端开发 Slide 46 浏览器渲染与web前端开发 Slide 47 浏览器渲染与web前端开发 Slide 48 浏览器渲染与web前端开发 Slide 49 浏览器渲染与web前端开发 Slide 50 浏览器渲染与web前端开发 Slide 51 浏览器渲染与web前端开发 Slide 52 浏览器渲染与web前端开发 Slide 53 浏览器渲染与web前端开发 Slide 54 浏览器渲染与web前端开发 Slide 55 浏览器渲染与web前端开发 Slide 56 浏览器渲染与web前端开发 Slide 57 浏览器渲染与web前端开发 Slide 58 浏览器渲染与web前端开发 Slide 59 浏览器渲染与web前端开发 Slide 60 浏览器渲染与web前端开发 Slide 61 浏览器渲染与web前端开发 Slide 62 浏览器渲染与web前端开发 Slide 63 浏览器渲染与web前端开发 Slide 64 浏览器渲染与web前端开发 Slide 65 浏览器渲染与web前端开发 Slide 66 浏览器渲染与web前端开发 Slide 67 浏览器渲染与web前端开发 Slide 68 浏览器渲染与web前端开发 Slide 69 浏览器渲染与web前端开发 Slide 70 浏览器渲染与web前端开发 Slide 71 浏览器渲染与web前端开发 Slide 72 浏览器渲染与web前端开发 Slide 73 浏览器渲染与web前端开发 Slide 74 浏览器渲染与web前端开发 Slide 75 浏览器渲染与web前端开发 Slide 76 浏览器渲染与web前端开发 Slide 77 浏览器渲染与web前端开发 Slide 78 浏览器渲染与web前端开发 Slide 79 浏览器渲染与web前端开发 Slide 80 浏览器渲染与web前端开发 Slide 81 浏览器渲染与web前端开发 Slide 82 浏览器渲染与web前端开发 Slide 83 浏览器渲染与web前端开发 Slide 84 浏览器渲染与web前端开发 Slide 85 浏览器渲染与web前端开发 Slide 86
Upcoming SlideShare
高工的个人发展规划
Next
Download to read offline and view in fullscreen.

36 Likes

Share

Download to read offline

浏览器渲染与web前端开发

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

浏览器渲染与web前端开发

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

    May. 23, 2016
  • e2ghost

    Oct. 23, 2015
  • Lihuiyin128

    May. 26, 2015
  • ns265422

    Mar. 26, 2015
  • pkuleon

    Dec. 23, 2014
  • pzz2011

    Nov. 12, 2014
  • QiLuo4

    Nov. 4, 2014
  • zflairz

    Apr. 25, 2014
  • sprming

    Mar. 17, 2014
  • YongBao

    Oct. 21, 2013
  • cvsuser

    Apr. 7, 2013
  • imbingdian

    Apr. 26, 2012
  • joesay

    Apr. 16, 2012
  • shawyon

    Apr. 11, 2012
  • ghlndsl

    Mar. 29, 2012
  • ilsanbao

    Mar. 23, 2012
  • vvwla

    Mar. 14, 2012
  • yiminghe

    Feb. 1, 2012
  • amdgigabyte

    Jan. 24, 2012
  • xplorencheerz

    Jan. 11, 2012

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

Views

Total views

8,373

On Slideshare

0

From embeds

0

Number of embeds

1,255

Actions

Downloads

378

Shares

0

Comments

0

Likes

36

×