1. WebKit是一个用于web browsers处理web pages的布局渲染引擎。
2. WebKit提供了多个类用于显示web元素,同时它还实现了很多浏览器属性和特性。比如,
点击链接进行页面转向,页面前进与后退,管理历史访问记录等等。
3. WebKit 核心功能:
a:) Loading -> Get the data.
* Very Complicated.
* Split between WebKit & WebCore
WebCore/loader
WebCore/platform/network
FrameLoaderClient
* Two paths :Frames VS Resources
-----------------------------------------
Loading a Frame
* Mostly FrameLoader
* Policy Stage
Block Pop-ups
Cross-process Navigation
* Provisional Phase
Download or Commit
* Commited Phase
Start of Parsing
-----------------------------------------
* Uses DocLoader & Cache
* DocLoader
Takes a URL
Talks to Cache or Loader
Returns CachedResource
* CachedResource
Handles callbacks
Produces object (image,Font...)
b:) Parsing -> Make a DOM Tree
* HTML VS XML
HTMLTokenizer & HTMLParser
XMLTokenizer(SAX-style)
* Elements from ElementFactory
* DNS Prefetch
* Pre-load scanning
* XSS-Auditor
c:) Data Structures
* Parsing
DOM Tree
* Layout
RenderObjectTree
-> All information required to paint
-> Owned by the DOM Tree
-> Only created for rendered content
RenderStyleTree
-> All CSS style information
-> Owned by the Render Tree
-> RenderObjects share styles
-> RenderStyles share data members
RenderLayerTree
-> Transparency,Masking
-> z-ordering
-> Overflow clip
-> Reflections,Shadows,Transforms
-> Positioned content
-> Textures on the GPU (iPhone)
* Line Layout
LineBox Tree
-> Held by a RenderBlock
-> List of RootLineBoxes,one per line
-> Sub-tree of InlineBoxes
(Each InlineBox has a RenderObject
RenderObject may have many InlineBoxes mapping to them)
d:) Layout -> Put stuff in the right place
e:) Paint
-> Only Render* class paint
-> GraphicsContext abstraction
-> RenderTheme for platform bits
f:) HTML Editing
* Hit Testing
-> Tree walk from the root layer
-> Multple phases
-> Every mouse move (:hover,onmousemove)
* Selection
-> positionForPoint
-> VisiblePosition
-> Selection is painted via a paint phase
* EditCommand
-> All editing logic
-> Holds undo state
-> Built into undo group trees
(Examples:
InsertTextCommand()
DeleteSelectionCommand()
ApplyStyleCommand()
SetNodeAttributeCommand())
* Undo/Redo
-> Managed by Webkit/OS Layer
-> Build off of EditCommands
-> execCommand undo/redo
* DOM Binding
* JS Binding Objects
------------------------------------------
(注意: Loading -> Source Text
Parsing -> DOM Tree
attach() -> RenderObject Tree
Style Resolution -> RenderStyles
Layout -> LineBoxes,Layers
----------------------------------
RenderObjectExamples:
-> RenderBoxModelObject (CSS)
-> RenderSVGModelObject
-> RenderBlock (<div>,<p>)
-> RenderInline (<span>,<b>,<i>)
-> RenderImage (<img>)
-> RenderText (#text)
-> RenderTableCell (<td>)
-----------------------------------
From Controls
-> Rendered by WebCore
-> Shadow DOM Trees
-> Theme images from the OS
)
4. Webkit中的Tree
a:) DOM Tree
b:) Render Tree
* Holds
Style information,computed metrics
Links to Founts,Images,Subframes
Shadow DOM Trees
* Handles
Layout
Paint
Hit testing
2. WebKit提供了多个类用于显示web元素,同时它还实现了很多浏览器属性和特性。比如,
点击链接进行页面转向,页面前进与后退,管理历史访问记录等等。
3. WebKit 核心功能:
a:) Loading -> Get the data.
* Very Complicated.
* Split between WebKit & WebCore
WebCore/loader
WebCore/platform/network
FrameLoaderClient
* Two paths :Frames VS Resources
-----------------------------------------
Loading a Frame
* Mostly FrameLoader
* Policy Stage
Block Pop-ups
Cross-process Navigation
* Provisional Phase
Download or Commit
* Commited Phase
Start of Parsing
-----------------------------------------
* Uses DocLoader & Cache
* DocLoader
Takes a URL
Talks to Cache or Loader
Returns CachedResource
* CachedResource
Handles callbacks
Produces object (image,Font...)
b:) Parsing -> Make a DOM Tree
* HTML VS XML
HTMLTokenizer & HTMLParser
XMLTokenizer(SAX-style)
* Elements from ElementFactory
* DNS Prefetch
* Pre-load scanning
* XSS-Auditor
c:) Data Structures
* Parsing
DOM Tree
* Layout
RenderObjectTree
-> All information required to paint
-> Owned by the DOM Tree
-> Only created for rendered content
RenderStyleTree
-> All CSS style information
-> Owned by the Render Tree
-> RenderObjects share styles
-> RenderStyles share data members
RenderLayerTree
-> Transparency,Masking
-> z-ordering
-> Overflow clip
-> Reflections,Shadows,Transforms
-> Positioned content
-> Textures on the GPU (iPhone)
* Line Layout
LineBox Tree
-> Held by a RenderBlock
-> List of RootLineBoxes,one per line
-> Sub-tree of InlineBoxes
(Each InlineBox has a RenderObject
RenderObject may have many InlineBoxes mapping to them)
d:) Layout -> Put stuff in the right place
e:) Paint
-> Only Render* class paint
-> GraphicsContext abstraction
-> RenderTheme for platform bits
f:) HTML Editing
* Hit Testing
-> Tree walk from the root layer
-> Multple phases
-> Every mouse move (:hover,onmousemove)
* Selection
-> positionForPoint
-> VisiblePosition
-> Selection is painted via a paint phase
* EditCommand
-> All editing logic
-> Holds undo state
-> Built into undo group trees
(Examples:
InsertTextCommand()
DeleteSelectionCommand()
ApplyStyleCommand()
SetNodeAttributeCommand())
* Undo/Redo
-> Managed by Webkit/OS Layer
-> Build off of EditCommands
-> execCommand undo/redo
* DOM Binding
* JS Binding Objects
------------------------------------------
(注意: Loading -> Source Text
Parsing -> DOM Tree
attach() -> RenderObject Tree
Style Resolution -> RenderStyles
Layout -> LineBoxes,Layers
----------------------------------
RenderObjectExamples:
-> RenderBoxModelObject (CSS)
-> RenderSVGModelObject
-> RenderBlock (<div>,<p>)
-> RenderInline (<span>,<b>,<i>)
-> RenderImage (<img>)
-> RenderText (#text)
-> RenderTableCell (<td>)
-----------------------------------
From Controls
-> Rendered by WebCore
-> Shadow DOM Trees
-> Theme images from the OS
)
4. Webkit中的Tree
a:) DOM Tree
b:) Render Tree
* Holds
Style information,computed metrics
Links to Founts,Images,Subframes
Shadow DOM Trees
* Handles
Layout
Paint
Hit testing