WebKit: A Comprehensive Overview
Introduction to
WebKit
Girish Ramakrishnan
History
1999
2001-3
2005
What is WebKit
WebKit is a rendering engine for web content
WebKit is not a browser, a science project, or the
solution to every problem
HTML
JavaScript
CSS
WebKit
Rendering of
a web page
Image stolen from
Adam Barth’s Presentation
WebKit ports
WebKit is designed to be highly portable
Bindings
(JavaScript API, Objective-C API)
Components
WebCore
(HTML, CSS, DOM, etc, etc)
WTF
(Data structures, Threading
primitives)
Platform
(Network, Storage, Graphics)
JavaScriptCore
(JavaScript Virtual Machine)
WebKit and WebKit2
(Embedding API)
Image stolen from
Adam Barth’s Presentation
WTF!?
•
The STL of WebKit project
o
Data structures
o
String
•
URL parser
•
Compiled as static lib
•
Minimal porting required (ifdef’s)
•
Source/WTF
JavaScriptCore
(AKA SFX and Nitro)
•
Primarily developed by Apple
•
Byte Level Interpreter (Llint)
•
Optional DFG JIT
•
Non-trivial to use a stand alone
•
Compiled as static lib
•
Source/JavaScriptCore
WebCore
•
HTML, CSS, XML, SVG ….
WebCore
•
Asks WebKit layer to load resource
•
Resource loading and frame loading are totally
separate
Network
Loader
Image stolen from
Adam Barth’s Presentation
WebCore
•
Fires off pre-load requests on the fly
•
XSS Auditor
Network
Loader
HTML Parser
WebCore
•
Parser generates DOM tree
Network
Loader
HTML Parser
DOM
Script
CSS
WebCore
•
Create RenderObjects using “Attachment”
Network
Loader
HTML Parser
DOM
Script
Render Tree
CSS
WebCore
•
CSS Style Computation
Network
Loader
HTML Parser
DOM
Script
Render Tree
CSS
RenderStyles
Image stolen from
Adam Barth’s Presentation
WebCore
•
CSS Style Computation
Network
Loader
HTML Parser
DOM
Script
Render Tree
CSS
RenderStyles
Image stolen from
Adam Barth’s Presentation
WebCore
Network
Loader
HTML Parser
DOM
Script
Render Tree
CSS
Layout
(RenderLayer,
LineBoxes)
RenderStyles
WebCore graphics
•
Accelerated Compositing
Image stolen from
Ariya Hidayat’s blogpost
WebCore Graphics
•
Tiled rendering
Image stolen from
Ariya Hidayat’s blogpost
WebCore
Directory structure is insightful
•
bindings (and idl files)
•
bridge
•
css
•
Dom
•
editing
•
history
•
html
•
icu
•
Inspector
•
loader
•
Platforms (graphics, network)
•
plugins
•
rendering
•
storage
•
svg
•
xml
WebCore Porting
•
Platforms/ implements port abstraction
o
Networking & Graphics
o
Time, DnD, Themes, Clipboard, UA
•
Many features like plugins require port specific
enhancements
o
Sprinkle ifdefs as necessary
o
Add dir/<port>/<file><port>.cpp
o
E.g history/qt/HistoryItemQt.cpp
WebCore Porting (2)
•
Client interfaces
o
Abstract interfaces implemented by the port
o
Used in place of ifdef’s when it’s useful for many ports
class GeolocationClient { virtual bool requestAccess() = 0; }void Page::setClient(GeolocationClient *c) { client = c; }bool Page::requestLocationAccess() { return client->requestAccess(); }// Qt
class GeolocationClientQt : public GeolocationClient { … }…
page->setClient(new GeolocationClientQt);
WebCore
•
Modules (battery, gelocation, indexeddb..)
•
Layout tests
•
Unit tests
WebKit
•
Platform specific code
o
APIs
o
WebCoreSupport
WebKit2
•
New async API that uses split process model
•
Developed by Apple
WebKit2
Image taken from
WebKit Wiki
WebKit2 vs Chrome
Image taken from
WebKit Wiki
Trying out WebKit
•
WebKit has no releases
•
Each port is compiled differently git.webkit.org
Thank you
•
Questions?
From the outside, WebKit is a daunting project. But once you are comfortable with the terminology, not do
"Explore the nuances of WebKit, a powerful web content rendering engine, delving into its history, components, and capabilities. Discover how WebKit ports have made it highly portable, as well as its core elements like WebCore, JavaScriptCore, and more. Unravel the mystique behind JavaScriptCore's development by Apple and the functionality of WebCore with HTML, CSS, XML, and SVG. Dive into the intricate workings of WebCore's network loader and parser, shedding light on resource loading, XSS auditing, DOM tree generation, and rendering. Uncover the essence of WebKit as more than just a browser, but a fundamental component of web technology evolution."
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Introduction to WebKit Girish Ramakrishnan
History 1999 2001-3 2005
What is WebKit WebKit is a rendering engine for web content HTML Rendering of a web page JavaScript WebKit CSS WebKit is not a browser, a science project, or the solution to every problem Image stolen from Adam Barth s Presentation
WebKit ports WebKit is designed to be highly portable
Components WebKit and WebKit2 (Embedding API) Bindings (JavaScript API, Objective-C API) WebCore (HTML, CSS, DOM, etc, etc) Platform (Network, Storage, Graphics) JavaScriptCore (JavaScript Virtual Machine) WTF (Data structures, Threading primitives) Image stolen from Adam Barth s Presentation
WTF!? The STL of WebKit project o Data structures o String URL parser Compiled as static lib Minimal porting required (ifdef s) Source/WTF
JavaScriptCore (AKA SFX and Nitro) Primarily developed by Apple Byte Level Interpreter (Llint) Optional DFG JIT Non-trivial to use a stand alone Compiled as static lib Source/JavaScriptCore
WebCore HTML, CSS, XML, SVG .
WebCore Network Loader Asks WebKit layer to load resource Resource loading and frame loading are totally separate Image stolen from Adam Barth s Presentation
WebCore Network Loader HTML Parser Fires off pre-load requests on the fly XSS Auditor
WebCore Network Loader HTML Parser CSS DOM Script Parser generates DOM tree
WebCore Network Loader HTML Parser CSS DOM Script Render Tree Create RenderObjects using Attachment
WebCore Network Loader HTML Parser CSS DOM Script Render Tree RenderStyles CSS Style Computation Image stolen from Adam Barth s Presentation
WebCore Network Loader HTML Parser CSS DOM Script Render Tree RenderStyles CSS Style Computation Image stolen from Adam Barth s Presentation
WebCore Network Loader HTML Parser CSS DOM Script Render Tree RenderStyles Layout (RenderLayer, LineBoxes)
WebCore graphics Accelerated Compositing Image stolen from Ariya Hidayat s blogpost
WebCore Graphics Tiled rendering Image stolen from Ariya Hidayat s blogpost
WebCore Directory structure is insightful bindings (and idl files) bridge css Dom editing history html icu Inspector loader Platforms (graphics, network) plugins rendering storage svg xml
WebCore Porting Platforms/ implements port abstraction o Networking & Graphics o Time, DnD, Themes, Clipboard, UA Many features like plugins require port specific enhancements o Sprinkle ifdefs as necessary o Add dir/<port>/<file><port>.cpp o E.g history/qt/HistoryItemQt.cpp
WebCore Porting (2) Client interfaces o Abstract interfaces implemented by the port o Used in place of ifdef swhen it s useful for many ports class GeolocationClient { virtual bool requestAccess() = 0; } void Page::setClient(GeolocationClient *c) { client = c; } bool Page::requestLocationAccess() { return client->requestAccess(); } // Qt class GeolocationClientQt : public GeolocationClient { } page->setClient(new GeolocationClientQt);
WebCore Modules (battery, gelocation, indexeddb..) Layout tests Unit tests
WebKit Platform specific code o APIs o WebCoreSupport
WebKit2 New async API that uses split process model Developed by Apple
WebKit2 Image taken from WebKit Wiki
WebKit2 vs Chrome Image taken from WebKit Wiki
Trying out WebKit WebKit has no releases Each port is compiled differently git.webkit.org
Thank you Questions?
