Webkit overview

•

1 like•2,476 views

Eun Cho

How Webkit Works?

Technology

High Level Structure
http://helloworld.naver.com/helloworld/59361

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

Normal Flow
Network Loader HTML Parser
CSS DOM Script
Render Tree
Graphics Context

LoaderResource, Document, Frames, page
Page
Main Frame
Document
Frame Frame
Frame
Document Document
Document

LoaderHow Webkit Loads a Web Page
https://www.webkit.org/blog/1188

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>

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

Reference
• How Browser Works? : Hello World
• HTML5 Parsing HTML
• How Webkit Works?
• Webkit For Developers

What's hot

Vue IntroductionElad Gasner

Best Practices - By Lofi DewantoGWTcon

VueJS: The Simple RevolutionRafael Casuso Romate

Android Chromium Rendering PipelineHyungwook Lee

HTML5 on the AGL demo platform with Chromium and WAM (AGL AMM March 2021)Igalia

Deview 2013 mobile browser internals and trends_20131022NAVER D2

Browsers on Android (Webkit,chromium)Bin Chen

Mobile Browser Internal (Blink Rendering Engine)Hyungwook Lee

Chrome & Webkit overviewBin Chen

GWT and PWAManuel Carrasco Moñino

Bootstrap Jump StartHaim Michael

Real time coding with jWebSocketVictor Antonio Barzana

Present and Future of GWT from a developer perspectiveManuel Carrasco Moñino

Chromium ui framework(shared)gnomekr

WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolutionjuanjosanchezpenas

Code on the Beach 2019 - Let's Take a Tour of .Net Core: CLIBrian McKeiver

Hardware Acceleration in WebKitJoone Hur

Chromium OzoneIgalia

Fixing Gaps. Strengthening the Chromium platform for content blockingIgalia

Unirex Lean tools By Dario CarotenutoGWTcon

What's hot (20)

Vue Introduction

Best Practices - By Lofi Dewanto

VueJS: The Simple Revolution

Android Chromium Rendering Pipeline

HTML5 on the AGL demo platform with Chromium and WAM (AGL AMM March 2021)

Deview 2013 mobile browser internals and trends_20131022

Browsers on Android (Webkit,chromium)

Mobile Browser Internal (Blink Rendering Engine)

Chrome & Webkit overview

GWT and PWA

Bootstrap Jump Start

Real time coding with jWebSocket

Present and Future of GWT from a developer perspective

Chromium ui framework(shared)

WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution

Code on the Beach 2019 - Let's Take a Tour of .Net Core: CLI

Hardware Acceleration in WebKit

Chromium Ozone

Fixing Gaps. Strengthening the Chromium platform for content blocking

Unirex Lean tools By Dario Carotenuto

Similar to Webkit overview

It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI

Meego Widget Development using Qt WRT @iRajLalRaj Lal

Decoding the Webnewcircle

Html5mikusuraj

phpbhuvana553

Presentation Tier optimizationsAnup Hariharan Nair

Widget Platformjosemataf

CTU June 2011 - Things that Every ASP.NET Developer Should KnowSpiffy

OneRing @ OSCamp 2010Qiangning Hong

Webové aplikace v JavaScriptuPavol Hejný

Analyzing the Performance of Mobile WebAriya Hidayat

Modern browsersVikram Rangnekar

Rendering engineDharita Chokshi

HTML5: An OverviewNagendra Um

RIAsJonathan Snook

Familiar HTML5 - 事例とサンプルコードから学ぶ身近で普通に使わているHTML5Sadaaki HIRAI

A Snapshot of the Mobile HTML5 RevolutionJames Pearce

Moving from Web 1.0 to Web 2.0Estelle Weyl

Change by HTML5dynamis

Rob Tweed :: Ajax and the Impact on Caché and Similar Technologiesgeorge.james

Similar to Webkit overview (20)

It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える

Meego Widget Development using Qt WRT @iRajLal

Decoding the Web

Html5

php

Presentation Tier optimizations

Widget Platform

CTU June 2011 - Things that Every ASP.NET Developer Should Know

OneRing @ OSCamp 2010

Webové aplikace v JavaScriptu

Analyzing the Performance of Mobile Web

Modern browsers

Rendering engine

HTML5: An Overview

RIAs

Familiar HTML5 - 事例とサンプルコードから学ぶ身近で普通に使わているHTML5

A Snapshot of the Mobile HTML5 Revolution

Moving from Web 1.0 to Web 2.0

Change by HTML5

Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies

Recently uploaded

08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls

TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc

A Domino Admins Adventures (Engage 2024)Gabriella Davis

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia

Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC

The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad

Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2

Presentation on how to chat with PDF using ChatGPT code interpreternaman860154

Salesforce Community Group Quito, Salesforce 101Paola De la Torre

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays

2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong

Partners Life - Insurer Innovation Award 2024The Digital Insurer

Automating Google Workspace (GWS) & more with Apps Scriptwesley chun

Slack Application Development 101 Slidespraypatel2

🐬 The future of MySQL is Postgres 🐘RTylerCroy

Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies

Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer

Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko

A Call to Action for Generative AI in 2024Results

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

Recently uploaded (20)

08448380779 Call Girls In Friends Colony Women Seeking Men

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

A Domino Admins Adventures (Engage 2024)

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...

Breaking the Kubernetes Kill Chain: Host Path Mount

The Codex of Business Writing Software for Real-World Solutions 2.pptx

Exploring the Future Potential of AI-Enabled Smartphone Processors

Presentation on how to chat with PDF using ChatGPT code interpreter

Salesforce Community Group Quito, Salesforce 101

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Partners Life - Insurer Innovation Award 2024

Automating Google Workspace (GWS) & more with Apps Script

Slack Application Development 101 Slides

🐬 The future of MySQL is Postgres 🐘

Factors to Consider When Choosing Accounts Payable Services Providers.pptx

Axa Assurance Maroc - Insurer Innovation Award 2024

Handwritten Text Recognition for manuscripts and early printed texts

A Call to Action for Generative AI in 2024

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Webkit overview

1. Webkit   Overview UIT개발실 조은

2. Web Browser

3. High Level Structure http://helloworld.naver.com/helloworld/59361

4. Webkit Rendering Engine

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> Hello </body> </html>

13. HTML ParserHow work HTML Tokenizer Start Tag: html Start Tag: body <html> <body> Hello </body> </html> Start Tag: p Hello End Tag : p End Tag : body End Tag : html

14. HTML ParserTree Builder <html> <body> Hello </body> </html> html p Hello body html body p Hello

15. HTML ParserFlow Charactors Tokens Nodes DOM Tokenizer Tree Builder <html><body>Hello</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

16. HTML ParserScript execution <html> <body> Hello <script></script> </body> </html>

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!

25. Render TreeFlow http://www.webkit.org/coding/dom-element-attach.html

26. Render TreeMinimizing Layout clientHeight clientLeft clientTop clientWidth offsetHeight offsetLeft offsetParent offsetTop offsetWIdth scrollLeft scrollTop scrollWidth innerText outerText focus() getBoundingClinetRect() getClientRect() scrollByLines

27. Normal Flow Network Loader HTML Parser CSS DOM Script Render Tree Graphics Context

28. GraphicsContextPrinting

29. More?I Love Firefox

30. Reference • How Browser Works? : Hello World • HTML5 Parsing HTML • How Webkit Works? • Webkit For Developers

31. Thank  You~