Scribd Logo
Upload

Welcome to Scribd!

  • 29 views

    How WebKit Works

    Uploaded by

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

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    How WebKit Works

    Uploaded by

    kr.pan199
    29 views16 pages
    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.

    Original Description:

    how webkit works asdasd asd asd asd

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    29 views16 pages

    How WebKit Works

    Uploaded by

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

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 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!
    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