WebKit! 
how the web is rendered 
Levi Weintraub
me 
Intel->Apple->Microsoft->Palm->HP->Google 
on and off on WebKit since 2006 
adventure motorcyclist
me 
Intel->Apple->Microsoft->Palm->HP->Google 
on and off on WebKit since 2006 
adventure motorcyclist
adventure motorcyclist
adventure motorcyclist 
Hi Dad!
rendering engine
browser 
rendering engine
3 primary rendering engines
primary rendering engines 
Trident
primary rendering engines 
Trident 
Internet Explorer
primary rendering engines 
Trident Gecko 
Internet Explorer
primary rendering engines 
Gecko 
Firefox 
Trident 
Internet Explorer
primary rendering engines 
Gecko 
Firefox 
Trident 
Internet Explorer 
WebKit
primary rendering engines 
Gecko 
Firefox 
Trident 
Internet Explorer 
WebKit 
Chrome, Safari, iOS, 
Android, Qt, Blackber...
Gecko WebKit 
FREE!
Gecko 
Firefox 
WebKit 
Chromium 
FREE!
over 38%1 
1: StatCounter's Global March 2012 http://gs.statcounter.com
history
KHTML + Konquerer
1998 KHTML released 
2001 WebKit secretly forked by Apple 
2002 JavaScriptCore released 
2003 WebCore & Safari released 
2...
anatomy of a WebKit browser
Embedding Application 
WebKit (component) 
WebCore 
JavaScript 
Engine Platform 
pushes WebKit to do work 
handles user in...
WebKit-based browser 
WebKit (component) 
WebCore 
JavaScript 
Engine Platform 
interface between 
rendering engine and 
e...
WebKit-based browser 
WebKit (component) 
WebCore 
JavaScript 
Engine Platform 
application logic 
painting 
event handlin...
WebKit-based browser 
WebKit (component) 
WebCore 
JavaScript 
Engine Platform network stack 
graphics library 
font engin...
WebKit-based browser 
WebKit (component) 
WebCore 
JavaScript 
Engine Platform 
V8 or JavaScriptCore 
parses and executes ...
WebCore
primary data structures 
parsing & interface: 
DOM tree 
layout and rendering: 
render object tree 
style tree 
layer tree...
main flow
loading 
network engine 
parser
parsing 
DOM tree 
loader
parsing JavaScript 
DOM tree 
render tree 
DOM API 
attach
DOM tree 
representation of document 
document API 
shadow DOM
DOM tree 
markup 
<html> 
<body> 
<div> 
foo 
<span> 
bar 
</span> 
</div> 
</body> 
</html> 
DOM representation 
HTMLDocu...
DOM tree style 
attach 
render tree
OK!
render forest 
render object tree 
layer tree 
inline box tree 
style tree
render object tree 
owned by DOM tree 
only exists for rendered content 
responsible for layout and paint 
answers DOM API...
12 paint phases! 
block background 
child block background 
child block backgrounds 
float 
foreground 
outline 
child out...
render object tree 
owned by DOM tree 
only exists for rendered content 
responsible for layout and paint 
answers DOM API...
render object tree 
DOM representation 
HTMLBodyElement 
HTMLDivElement 
Text("foo") 
HTMLSpanElement 
Text("bar") 
render...
anonymous blocks 
DOM representation 
HTMLBodyElement 
HTMLDivElement 
Text("foo") 
HTMLSpanElement 
Text("bar") 
HTMLDivE...
style tree 
contains all computed style values for renderers 
owned by render object tree 
RenderObjects share RenderStyle...
render layer tree 
like helper class for rendering 
used for <video>, <canvas> with WebGL, 
positioned, transformed, trans...
render layer structure 
negative z-index list 
RenderLaye 
RenrderLaye 
Rer nder 
Layers 
RenderLayer 
positive z-index li...
render layer painting 
negative z-index list 
RenderLaye 
RenrderLaye 
Rer nder 
Layers 
RenderLayer 
positive z-index lis...
render layer painting 
negative z-index list 
RenderLaye 
RenrderLaye 
Rer nder 
Layers 
2 
RenderLayer 
positive z-index ...
render layer painting 
negative z-index list 
RenderLaye 
RenrderLaye 
Rer nder 
Layers 
RenderLayer 
positive z-index lis...
render layer painting, software 
paint the intersection of the paint dirty rect with 
all intersecting layers in order 
al...
render layer painting, hw accelerated 
some RenderLayers have backing store GPU 
texture 
used for 3D transforms, <video>,...
line box tree 
owned by RenderBlock 
one RootInlineBox per line 
RootInlineBox has list of InlineBoxes in that line 
each ...
line box tree 
Markup: <div>foo<b>bar</b><br>baz</div> 
render tree 
RenderBlock(div) 
RenderText("foo") 
RenderInline(b) ...
layout 
changes to DOM marks renderers as dirty 
layout before paint or measurement from JS 
● save old repaint rect 
● br...
layout 
changes to DOM marks renderers as dirty 
layout before paint or measurement from JS 
● save old repaint rect 
● br...
review of main flow 
loader->parser->DOM tree->render tree 
render tree: 
● RenderObject tree 
● RenderLayer tree 
● Rende...
paint 
animations, blinking carets, layout, etc. trigger 
invalidations to embedder app 
app collects rects, triggers pain...
hit testing 
constant during mouse move 
multiple phases 
tree walk from root RenderLayer 
RenderLayer transforms into loc...
upcoming features 
component model 
sub-pixel layout 
lots lots more
component model 
based on shadow DOM 
hides implementation 
● events re-targeted 
● shadow children inaccessible by regula...
shadow DOM tree 
Document tree 
shadow host 
DOM child DOM child 
shadow root 
shadow child shadow child 
shadow boundary
shadow render tree 
render tree 
shadow host 
shadow child shadow child
integer layout 
layout currently uses integers 
fractional pixel values truncated 
breaks at non-1:1 zoom 
error accumulat...
1.5x zoom is bad 
150px * 1.5x = 225px 
(15px * 1.5x) * 10 = 220px
sub-pixel layout 
integers replaced by fixed-point unit 
boxes snapped to pixel values 
supports sub-pixel CSS values 
err...
multi-process browsers 
centralized resources 
● networking 
● cache 
● compositor 
● plugins 
safety through sandboxing 
...
chrome architecture 
network stack browser process file io 
plugin process 
GPU process 
plugin processes 
render 
process...
thanks! 
questions? 
http://webkit.org 
http://chromium.org 
leviw@chromium.org 
Levi Weintraub
How web kit renders
How web kit renders
Upcoming SlideShare
Loading in...5
×

How web kit renders

461

Published on

How WebKit is Rendered in a Browser

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
461
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "How web kit renders"

  1. 1. WebKit! how the web is rendered Levi Weintraub
  2. 2. me Intel->Apple->Microsoft->Palm->HP->Google on and off on WebKit since 2006 adventure motorcyclist
  3. 3. me Intel->Apple->Microsoft->Palm->HP->Google on and off on WebKit since 2006 adventure motorcyclist
  4. 4. adventure motorcyclist
  5. 5. adventure motorcyclist Hi Dad!
  6. 6. rendering engine
  7. 7. browser rendering engine
  8. 8. 3 primary rendering engines
  9. 9. primary rendering engines Trident
  10. 10. primary rendering engines Trident Internet Explorer
  11. 11. primary rendering engines Trident Gecko Internet Explorer
  12. 12. primary rendering engines Gecko Firefox Trident Internet Explorer
  13. 13. primary rendering engines Gecko Firefox Trident Internet Explorer WebKit
  14. 14. primary rendering engines Gecko Firefox Trident Internet Explorer WebKit Chrome, Safari, iOS, Android, Qt, Blackberry, webOS, Kindle, etc.
  15. 15. Gecko WebKit FREE!
  16. 16. Gecko Firefox WebKit Chromium FREE!
  17. 17. over 38%1 1: StatCounter's Global March 2012 http://gs.statcounter.com
  18. 18. history
  19. 19. KHTML + Konquerer
  20. 20. 1998 KHTML released 2001 WebKit secretly forked by Apple 2002 JavaScriptCore released 2003 WebCore & Safari released 2005 WebKit open sourced 2008 Google Chrome released for Windows 2009 Chrome Beta for Mac OS X and Linux 2007 Safari for Windows 2010 KDE re-integrates WebKit - WebKit2 announced 2012 WebKit dominant web platform ??? Profit!!
  21. 21. anatomy of a WebKit browser
  22. 22. Embedding Application WebKit (component) WebCore JavaScript Engine Platform pushes WebKit to do work handles user input
  23. 23. WebKit-based browser WebKit (component) WebCore JavaScript Engine Platform interface between rendering engine and embedding application
  24. 24. WebKit-based browser WebKit (component) WebCore JavaScript Engine Platform application logic painting event handling editing javascript bindings loading parsing layout style resolution
  25. 25. WebKit-based browser WebKit (component) WebCore JavaScript Engine Platform network stack graphics library font engine native widgets abstraction of native components
  26. 26. WebKit-based browser WebKit (component) WebCore JavaScript Engine Platform V8 or JavaScriptCore parses and executes page logic allows DOM manipulation
  27. 27. WebCore
  28. 28. primary data structures parsing & interface: DOM tree layout and rendering: render object tree style tree layer tree line box tree
  29. 29. main flow
  30. 30. loading network engine parser
  31. 31. parsing DOM tree loader
  32. 32. parsing JavaScript DOM tree render tree DOM API attach
  33. 33. DOM tree representation of document document API shadow DOM
  34. 34. DOM tree markup <html> <body> <div> foo <span> bar </span> </div> </body> </html> DOM representation HTMLDocument HTMLHTMLElement HTMLBodyElement HTMLDivElement Text("foo") HTMLSpanElement Text("bar")
  35. 35. DOM tree style attach render tree
  36. 36. OK!
  37. 37. render forest render object tree layer tree inline box tree style tree
  38. 38. render object tree owned by DOM tree only exists for rendered content responsible for layout and paint answers DOM API measurement requests
  39. 39. 12 paint phases! block background child block background child block backgrounds float foreground outline child outlines self outline selection collapsed table borders text clip mask
  40. 40. render object tree owned by DOM tree only exists for rendered content responsible for layout and paint answers DOM API measurement requests
  41. 41. render object tree DOM representation HTMLBodyElement HTMLDivElement Text("foo") HTMLSpanElement Text("bar") render objects RenderBlock RenderBlock RenderText("foo") RenderInline RenderText("bar")
  42. 42. anonymous blocks DOM representation HTMLBodyElement HTMLDivElement Text("foo") HTMLSpanElement Text("bar") HTMLDivElement Text("baz") render objects RenderBlock RenderBlock RenderBlock(anonymous) RenderText("foo") RenderInline RenderText("bar") RenderBlock RenderText("baz")
  43. 43. style tree contains all computed style values for renderers owned by render object tree RenderObjects share RenderStyles RenderStyles share data members
  44. 44. render layer tree like helper class for rendering used for <video>, <canvas> with WebGL, positioned, transformed, transparent, masked, clipped, scrollable, or reflected elements establishes coordinate space and z-ordering at least one per document, sparsely maps to renderers
  45. 45. render layer structure negative z-index list RenderLaye RenrderLaye Rer nder Layers RenderLayer positive z-index list RenderLaye RenrderLaye Rer nder Layers RenderObject RenderObject RenderObject
  46. 46. render layer painting negative z-index list RenderLaye RenrderLaye Rer nder Layers RenderLayer positive z-index list RenderLaye RenrderLaye Rer nder Layers RenderObject 1 RenderObject RenderObject
  47. 47. render layer painting negative z-index list RenderLaye RenrderLaye Rer nder Layers 2 RenderLayer positive z-index list RenderLaye RenrderLaye Rer nder Layers RenderObject RenderObject RenderObject
  48. 48. render layer painting negative z-index list RenderLaye RenrderLaye Rer nder Layers RenderLayer positive z-index list RenderLaye RenrderLaye Rer nder Layers RenderObject 3 RenderObject RenderObject
  49. 49. render layer painting, software paint the intersection of the paint dirty rect with all intersecting layers in order all layers render into the same output buffer
  50. 50. render layer painting, hw accelerated some RenderLayers have backing store GPU texture used for 3D transforms, <video>, <canvas>/ plugins with 3D, stacking contexts, or sub-frames dirtied RenderLayers paint to GPU texture GPU composites textures onto final output buffer
  51. 51. line box tree owned by RenderBlock one RootInlineBox per line RootInlineBox has list of InlineBoxes in that line each InlineBox has a RenderObject a renderer may have many InlineBoxes relies on RenderBlock for layout
  52. 52. line box tree Markup: <div>foo<b>bar</b><br>baz</div> render tree RenderBlock(div) RenderText("foo") RenderInline(b) RenderText("bar") RenderBR RenderText("baz") line box tree RenderBlock(div) RootInlineBox InlineTextBox("foo") InlineFlowBox(b) InlineTextBox(b) InlineBox(br) RootInlineBox InlineTextBox("baz")
  53. 53. layout changes to DOM marks renderers as dirty layout before paint or measurement from JS ● save old repaint rect ● bring in updates from DOM ● determine our preferred width ● layout children to determine height ● repaint difference between old and new rect
  54. 54. layout changes to DOM marks renderers as dirty layout before paint or measurement from JS ● save old repaint rect ● bring in updates from DOM ● determine our preferred width ● layout children to determine height ● repaint difference between old and new rect
  55. 55. review of main flow loader->parser->DOM tree->render tree render tree: ● RenderObject tree ● RenderLayer tree ● RenderStyle tree ● InlineBoxTree
  56. 56. paint animations, blinking carets, layout, etc. trigger invalidations to embedder app app collects rects, triggers paint tree walk from root RenderLayer RenderObjects and InlineBoxes paint GraphicsContext abstraction
  57. 57. hit testing constant during mouse move multiple phases tree walk from root RenderLayer RenderLayer transforms into local coordinates
  58. 58. upcoming features component model sub-pixel layout lots lots more
  59. 59. component model based on shadow DOM hides implementation ● events re-targeted ● shadow children inaccessible by regular DOM defined interface
  60. 60. shadow DOM tree Document tree shadow host DOM child DOM child shadow root shadow child shadow child shadow boundary
  61. 61. shadow render tree render tree shadow host shadow child shadow child
  62. 62. integer layout layout currently uses integers fractional pixel values truncated breaks at non-1:1 zoom error accumulates
  63. 63. 1.5x zoom is bad 150px * 1.5x = 225px (15px * 1.5x) * 10 = 220px
  64. 64. sub-pixel layout integers replaced by fixed-point unit boxes snapped to pixel values supports sub-pixel CSS values error doesn't accumulate
  65. 65. multi-process browsers centralized resources ● networking ● cache ● compositor ● plugins safety through sandboxing multiple main loops ≈ multi-core
  66. 66. chrome architecture network stack browser process file io plugin process GPU process plugin processes render processes shared memory gles2.0 instructions textures
  67. 67. thanks! questions? http://webkit.org http://chromium.org leviw@chromium.org Levi Weintraub

×