Webkit overview

•

1 recomendación•2,476 vistas

Eun Cho

How Webkit Works?

Tecnología

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

Más contenido relacionado

La actualidad más candente

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

La actualidad más candente (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 a 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 a 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

Último

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer

The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los

Presentation on how to chat with PDF using ChatGPT code interpreternaman860154

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science

A Call to Action for Generative AI in 2024Results

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

What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco

08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls

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

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

How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung

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

CNv6 Instructor Chapter 6 Quality of Servicegiselly40

Artificial Intelligence: Facts and MythsJoaquim Jorge

04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG

🐬 The future of MySQL is Postgres 🐘RTylerCroy

Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer

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

Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun

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~