Scribd
Upload
38 views

How WebKit Works

WebKit is a rendering engine that converts HTML, CSS, and JavaScript into rendered web pages. It has major components including WebCore, which handles HTML parsing and DOM construction, JavaScriptCore for script execution, and a rendering engine that converts the DOM and styles into render trees and layers for drawing. As a page loads, its resources are requested and content is tokenized, parsed into a DOM tree, styled, and rendered to the screen. Security features like XSSAuditor also analyze content at different stages of processing.

Uploaded by

kr.pan199
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
38 views

How WebKit Works

WebKit is a rendering engine that converts HTML, CSS, and JavaScript into rendered web pages. It has major components including WebCore, which handles HTML parsing and DOM construction, JavaScriptCore for script execution, and a rendering engine that converts the DOM and styles into render trees and layers for drawing. As a page loads, its resources are requested and content is tokenized, parsed into a DOM tree, styled, and rendered to the screen. Security features like XSSAuditor also analyze content at different stages of processing.

Uploaded by

kr.pan199
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

Rendering of a
JavaScript WebKit web page

CSS

WebKit is not a browser, a science project, or


the solution to every problem
Major Components

WebKit and WebKit2


This talk (Embedding API)

Bindings
(JavaScript API, Objective-C API)

WebCore
(HTML, CSS, DOM, etc, etc) JavaScriptCore
Platform (JavaScript Virtual Machine)
(Network, Storage, Graphics)

WTF
(Data structures, Threading primitives)
Life of Web Page

Network

Loader

HTML Parser

CSS DOM Script

Render Tree

Graphics Context
Pages, Frames, and Documents
Page

Main Frame

Document

Frame Frame

Document Document

Frame

Document
Frame

Document
Lifecycle of a Frame
Uninitialized

Initial Provisional
Document

Checking Ready to
Policy Commit

Committed

● Committed is the quiescent state


How the Loader Works (Idealized)

CachedResourceRequest

CachedResourceLoader MemoryCache

CachedResource

The Loader is actually very messy and ResourceRequest


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

ResourceLoader

ResourceHandle
Platform-specific code
How the HTML Parser Works
3C 62 6F 64 79 3E 48 65 6C 6C 6F 2C 20 3C 73 70 61 6E 3E 77 6F 72 6C
Bytes
64 21 3C 2F 73 70 61 6E 3E 3C 2F 62 6F 64 79 3E

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

Tokens StartTag: body Hello, StartTag: span world! EndTag: span

Hello, world! TreeBuilder


Nodes body span

body
DOM

Hello, span

world!
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

HTTP Request XSSAuditor

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 } Render


body > span { font-weight: bold; } Block

Render
Block
Layout
html
Render Render
bold
Text Inline
head body

Render Render
fixed
title Hello, span Text Image

Greeting world! img


Anonymous RenderObjects

Render
Block
div
Anonymous

Hello, Render Render


div
Block Block

world!
Render Render
Text 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 Render
bold
Text Inline

Render Render
fixed
Text Image

● 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>
RootInlineBox InlineTextBox

Render RootInlineBox InlineTextBox


Block

RootInlineBox InlineTextBox InlineTextBox


Render Render
bold
Text Inline

Render
Text

● One RootInlineBox per line of text


● List of inline flow and inline text boxes
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!
[email protected]

You might also like