Embed Size (px)
DESCRIPTION
How Webkit Works?
Citation preview
Webkit Overview
UIT개발실 조은
Web Browser
High Level Structure
http://helloworld.naver.com/helloworld/59361
Webkit
Rendering Engine
Major ComponentWebkit & Webkit2(Embedding API)
Bindings (JS API, Objective-C API)
Web Core(HTML, CSS, DOM, ETC)
Platform(Network, Storage, Graphic)
JavaScript Core(JS Virtual Machine)
WTF(Data Structures, Threading)
http://goo.gl/pXtG2S
Major ComponentWebkit & Webkit2(Embedding API)
Bindings (JS API, Objective-C API)
Web Core(HTML, CSS, DOM, ETC)
Platform(Network, Storage, Graphic)
JavaScript Core(JS Virtual Machine)
WTF(Data Structures, Threading)
http://goo.gl/pXtG2S
Normal FlowNetwork Loader HTML Parser
CSS DOM Script
Render Tree
Graphics Context
Normal FlowNetwork Loader HTML Parser
CSS DOM Script
Render Tree
Graphics Context
LoaderResource, Document, Frames, page
Page
Main Frame
Document
Frame Frame
Frame
Document Document
Document
Normal FlowNetwork Loader HTML Parser
CSS DOM Script
Render Tree
Graphics Context
HTML ParserHTML Code (Charactor)
<html> <body> <p>Hello</p> </body> </html>
HTML ParserHow work HTML Tokenizer
Start Tag: html
Start Tag: body
<html> <body> <p>Hello</p> </body> </html>
Start Tag: p
Hello
End Tag : p
End Tag : body
End Tag : html
HTML ParserTree Builder
<html> <body> <p>Hello</p> </body> </html>
html
p Hello
body
html
body
p
Hello
HTML ParserFlow
Charactors
Tokens
Nodes
DOM
Tokenizer
Tree Builder
<html><body><p>Hello</p></body></html>
Start Tag: html Start Tag: body Start Tag: p Hello
End Tag : p End Tag : body End Tag : html
html p Hellobody
html
body
p
Hello
HTML ParserScript execution
<html> <body> <p>Hello</p> <script></script> </body> </html>
Normal FlowNetwork Loader HTML Parser
CSS DOM Script
Render Tree
Graphics Context
Normal FlowNetwork Loader HTML Parser
CSS DOM Script
Render Tree
Graphics Context
HTML ParserWhere Define Parsing Role?
Normal FlowNetwork Loader HTML Parser
CSS DOM Script
Render Tree
Graphics Context
Render TreeDOM & CSS
HTML
Head Body
Title
Hello?
spanHello,
World! img
img {border:0} span {font-size:14px}
DOM Tree
Render TreeDOM + CSS = Render Tree
HTML
Head Body
Title
Hello?
spanHello,
World! img
img {border:0} span {font-size:14px}
Render Block
Render Block
Render Text Render Inline
Render Text Render Image
border
size
Render TreeAnonymous RenderObject
Body
divHello,
World!
Render Block
Render Text Render Block
Render Text
Render TreeAnonymous RenderObject
Render Block
Render Block
Render Text
Render Block
Render Text
Not Every Render Object has a DOM Node
Body
divHello,
World!
Render TreeFlow
http://www.webkit.org/coding/dom-element-attach.html
Render TreeMinimizing Layout
clientHeight clientLeft clientTop clientWidth offsetHeight offsetLeft offsetParent offsetTop offsetWIdth
scrollLeft scrollTop scrollWidth innerText outerText focus() getBoundingClinetRect() getClientRect() scrollByLines
Normal FlowNetwork Loader HTML Parser
CSS DOM Script
Render Tree
Graphics Context
GraphicsContextPrinting
More?I Love Firefox
Reference• How Browser Works? : Hello World
• HTML5 Parsing HTML
• How Webkit Works?
• Webkit For Developers
ThankYou~
