how webkit works
DESCRIPTION
How WebKit WorksTRANSCRIPT
![Page 1: How WebKit Works](https://reader031.vdocument.in/reader031/viewer/2022013102/5452822fb1af9f7f248b51df/html5/thumbnails/1.jpg)
How WebKit WorksAdam Barth (abarth)October 30, 2012
![Page 2: How WebKit Works](https://reader031.vdocument.in/reader031/viewer/2022013102/5452822fb1af9f7f248b51df/html5/thumbnails/2.jpg)
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
WebKitRendering of a
web page
![Page 3: How WebKit Works](https://reader031.vdocument.in/reader031/viewer/2022013102/5452822fb1af9f7f248b51df/html5/thumbnails/3.jpg)
WebCore(HTML, CSS, DOM, etc, etc)
Major Components
WTF(Data structures, Threading primitives)
Platform(Network, Storage, Graphics)
JavaScriptCore(JavaScript Virtual Machine)
Bindings(JavaScript API, Objective-C API)
WebKit and WebKit2(Embedding API)This talk
![Page 4: How WebKit Works](https://reader031.vdocument.in/reader031/viewer/2022013102/5452822fb1af9f7f248b51df/html5/thumbnails/4.jpg)
Life of Web Page
Network
Loader
HTML Parser
DOM Script
Render Tree
CSS
Graphics Context
![Page 5: How WebKit Works](https://reader031.vdocument.in/reader031/viewer/2022013102/5452822fb1af9f7f248b51df/html5/thumbnails/5.jpg)
Page
Main Frame
Document
Pages, Frames, and Documents
Frame Frame
Frame
Document Document
Document
Frame
Document
![Page 6: How WebKit Works](https://reader031.vdocument.in/reader031/viewer/2022013102/5452822fb1af9f7f248b51df/html5/thumbnails/6.jpg)
Lifecycle of a Frame
Uninitialized
Initial Document
Provisional
Ready to Commit
Committed
Checking Policy
● Committed is the quiescent state
![Page 7: How WebKit Works](https://reader031.vdocument.in/reader031/viewer/2022013102/5452822fb1af9f7f248b51df/html5/thumbnails/7.jpg)
How the Loader Works (Idealized)
MemoryCacheCachedResourceLoader
CachedResource
ResourceRequest
ResourceLoader
ResourceHandle
CachedResourceRequest
The Loader is actually very messy and complicated, but we have a long-term project to clean up its nuttiness
Platform-specific code
![Page 8: How WebKit Works](https://reader031.vdocument.in/reader031/viewer/2022013102/5452822fb1af9f7f248b51df/html5/thumbnails/8.jpg)
Tokenizer
TreeBuilder
How the HTML Parser Works
Bytes
Characters
Tokens
Nodes
DOM
<body>Hello, <span>world!</span></body>
StartTag: body Hello, StartTag: span world! EndTag: span
body Hello, span world!
body
Hello, span
world!
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
![Page 9: How WebKit Works](https://reader031.vdocument.in/reader031/viewer/2022013102/5452822fb1af9f7f248b51df/html5/thumbnails/9.jpg)
Preload Scanning for Fun and Profit
Mary had a little lamb Tokenizer TreeBuilder
document.write("<textarea>");
Script execution can change the input streamPreload scanner tokenizes ahead● When parser is blocked on external scripts● Starts resource loads earlier
![Page 10: How WebKit Works](https://reader031.vdocument.in/reader031/viewer/2022013102/5452822fb1af9f7f248b51df/html5/thumbnails/10.jpg)
XSSAuditor
Tokenizer TreeBuilder
HTTP Request
HTTP Response
XSSAuditor
XSSAuditor examines token streamLooks for scripts that were also in the request● Assumes those scripts were reflected XSS● Blocks them
![Page 11: How WebKit Works](https://reader031.vdocument.in/reader031/viewer/2022013102/5452822fb1af9f7f248b51df/html5/thumbnails/11.jpg)
DOM + CSS → Render Tree
body
Hello, span
world!
html
head
title
Greeting img
#footer { position: fixed; bottom: 0; left: 0 }body > span { font-weight: bold; }
RenderBlock
RenderInline
RenderText
RenderImage
RenderText bold
Layout
RenderBlock
fixed
![Page 12: How WebKit Works](https://reader031.vdocument.in/reader031/viewer/2022013102/5452822fb1af9f7f248b51df/html5/thumbnails/12.jpg)
Anonymous RenderObjects
div
Hello, div
world!
RenderBlock
RenderBlock
RenderText
RenderBlock
RenderText
Anonymous
● Not every RenderObject has a DOM Node● Every RenderBlock either:
○ Has all inline children○ Has no inline children
![Page 13: How WebKit Works](https://reader031.vdocument.in/reader031/viewer/2022013102/5452822fb1af9f7f248b51df/html5/thumbnails/13.jpg)
LayerTree
RenderBlock
RenderInline
RenderText
RenderImage
RenderText bold
RenderBlock
fixed
RenderLayer
RenderLayer
● Sparse representation of RenderTree● Enables accelerated compositing, scrolling
![Page 14: How WebKit Works](https://reader031.vdocument.in/reader031/viewer/2022013102/5452822fb1af9f7f248b51df/html5/thumbnails/14.jpg)
Yet Another Tree: LineBoxTree
<div>An old silent pond...A frog jumps into the pond,splash! <b>Silence again.</b></div>
InlineTextBox
InlineTextBox InlineTextBox
RootInlineBox
RootInlineBox
RootInlineBox
InlineTextBoxRenderBlock
RenderText
RenderInline
RenderText
bold
● One RootInlineBox per line of text● List of inline flow and inline text boxes
![Page 15: How WebKit Works](https://reader031.vdocument.in/reader031/viewer/2022013102/5452822fb1af9f7f248b51df/html5/thumbnails/15.jpg)
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