Scribd
Upload
247 views16 pages

How WebKit Works

WebKit is a rendering engine that converts HTML, CSS, and JavaScript into rendered web pages. It has major components like WebCore, JavaScriptCore, and WTF that handle different parts of processing and rendering a web page. The main stages in rendering a page include network loading, parsing HTML and CSS, building the DOM and render trees, and finally displaying the result graphics. Frames, documents, and rendering trees like the layer tree are key structures involved in displaying web content.

Uploaded by

chesterpeters
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
247 views16 pages

How WebKit Works

WebKit is a rendering engine that converts HTML, CSS, and JavaScript into rendered web pages. It has major components like WebCore, JavaScriptCore, and WTF that handle different parts of processing and rendering a web page. The main stages in rendering a page include network loading, parsing HTML and CSS, building the DOM and render trees, and finally displaying the result graphics. Frames, documents, and rendering trees like the layer tree are key structures involved in displaying web content.

Uploaded by

chesterpeters
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

How WebKit

Works
Adam Barth (abarth)
October 30, 2012

What is WebKit?
WebKit is a rendering engine for web content
HTML

JavaScript

WebKit

Rendering of a
web page

CSS

WebKit is not a browser, a science project, or


the solution to every problem

Major Components

This talk

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)

Life of Web Page


Network

Loader

HTML Parser

CSS

DOM

Render Tree

Graphics Context

Script

Pages, Frames, and Documents


Page
Main Frame
Document
Frame
Document

Frame
Document

Frame
Document
Frame
Document

Lifecycle of a Frame
Uninitialized

Initial
Document

Provisional

Checking
Policy

Ready to
Commit

Committed

Committed is the quiescent state

How the Loader Works (Idealized)


CachedResourceRequest

CachedResourceLoader

MemoryCache

CachedResource

The Loader is actually very messy and


complicated, but we have a long-term
project to clean up its nuttiness

ResourceRequest

ResourceLoader

ResourceHandle
Platform-specific code

How the HTML Parser Works


Bytes

Characters

Tokens

Nodes

3C 62 6F 64 79 3E 48 65 6C 6C 6F 2C 20 3C 73 70 61 6E 3E 77 6F 72 6C
64 21 3C 2F 73 70 61 6E 3E 3C 2F 62 6F 64 79 3E
Tokenizer

<body>Hello, <span>world!</span></body>

StartTag: body

body

Hello,

Hello,

body

DOM
Hello,

span

world!

span

StartTag: span

world!

world!

EndTag: span

TreeBuilder

Preload Scanning for Fun and Profit


document.write("<textarea>");

Mary had a little lamb

Tokenizer

TreeBuilder

Script execution can change the input stream


Preload scanner tokenizes ahead
When parser is blocked on external scripts
Starts resource loads earlier

XSSAuditor
XSSAuditor

HTTP Request

HTTP Response

Tokenizer

TreeBuilder

XSSAuditor examines token stream


Looks for scripts that were also in the request
Assumes those scripts were reflected XSS
Blocks them

DOM + CSS Render Tree

#footer { position: fixed; bottom: 0; left: 0 }


body > span { font-weight: bold; }

Render
Block

Render
Block

Layout
html
Render
Text
head

title

Greeting

Render
Inline

bold

body

Hello,

Render
Text

span

world!

img

Render
Image

fixed

Anonymous RenderObjects
Render
Block

div
Anonymous
Hello,

div

world!

Render
Block

Render
Block

Render
Text

Render
Text

Not every RenderObject has a DOM Node


Every RenderBlock either:
Has all inline children
Has no inline children

LayerTree
Render
Layer

Render
Block

Render
Block
Render
Layer
Render
Text

Render
Inline

Render
Text

bold

Render
Image

fixed

Sparse representation of RenderTree


Enables accelerated compositing, scrolling

Yet Another Tree: LineBoxTree


<div>An old silent pond...
A frog jumps into the pond,
splash! <b>Silence again.</b></div>
Render
Block

Render
Text

Render
Inline

RootInlineBox

InlineTextBox

RootInlineBox

InlineTextBox

RootInlineBox

InlineTextBox

bold

Render
Text

One RootInlineBox per line of text


List of inline flow and inline text boxes

InlineTextBox

Conclusion
WebCore's main processing pipeline:
Loader and Parser
CSS, DOM, and Script
RenderTree, LayerTree, and InlineBoxes

Other major subsystems


Accessibility, Editing, Events, CSS, Web Inspector
Plugins, SVG, MathML, XSLT...

Other components
WebKit, Bindings, Platform, JavaScriptCore, WTF
... 1.5 MLOC of C++

Learn more:
http://www.webkit.org/coding/technical-articles.html

Thanks!
abarth@webkit.org

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy