Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Webkit overview
Ähnlich wie Webkit overview (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Webkit overview
- 2. Web Browser
- 5. Major Component Webkit & 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
- 6. Major Component Webkit & 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
- 7. Normal Flow Network Loader HTML Parser CSS DOM Script Render Tree Graphics Context
- 8. Normal Flow Network Loader HTML Parser CSS DOM Script Render Tree Graphics Context
- 9. LoaderResource, Document, Frames, page Page Main Frame Document Frame Frame Frame Document Document Document
- 10. LoaderHow Webkit Loads a Web Page https://www.webkit.org/blog/1188
- 11. Normal Flow Network Loader HTML Parser CSS DOM Script Render Tree Graphics Context
- 12. HTML ParserHTML Code (Charactor) <html> <body> <p>Hello</p> </body> </html>
- 13. 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
- 14. HTML ParserTree Builder <html> <body> <p>Hello</p> </body> </html> html p Hello body html body p Hello
- 15. 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
- 17. Normal Flow Network Loader HTML Parser CSS DOM Script Render Tree Graphics Context
- 18. Normal Flow Network Loader HTML Parser CSS DOM Script Render Tree Graphics Context
- 19. HTML ParserWhere Define Parsing Role?
- 20. Normal Flow Network Loader HTML Parser CSS DOM Script Render Tree Graphics Context
- 21. Render TreeDOM & CSS HTML Head Body Title Hello? spanHello, World! img img {border:0} span {font-size:14px} DOM Tree
- 22. 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
- 23. Render TreeAnonymous RenderObject Body divHello, World! Render Block Render Text Render Block Render Text
- 24. Render TreeAnonymous RenderObject Render Block Render Block Render Text Render Block Render Text Not Every Render Object has a DOM Node Body divHello, World!
- 27. Normal Flow Network Loader HTML Parser CSS DOM Script Render Tree Graphics Context
- 30. Reference • How Browser Works? : Hello World • HTML5 Parsing HTML • How Webkit Works? • Webkit For Developers
- 31. Thank You~