Scribd Logo
Upload

Welcome to Scribd!

  • How Browser Work

    Uploaded by

    Virender Sahu
    5 views12 pages
    The document summarizes the key steps involved in rendering a webpage from HTML and CSS code: 1. The browser first receives bytes of data from the server, which are converted to characters and parsed into a DOM tree. 2. Styles from CSS files are also parsed and used to build a CSSOM tree, which is then combined with the DOM tree. 3. The browser generates a render tree from the DOM and CSSOM, then performs layout by calculating element positions. 4. It paints the pixels to the screen and does compositing by building layers for elements.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document summarizes the key steps involved in rendering a webpage from HTML and CSS code: 1. The browser first receives bytes of data from the server, which are converted to characters and parsed into a DOM tree. 2. Styles from CSS files are also parsed and used to build a CSSOM tree, which is then combined with the DOM tree. 3. The browser generates a render tree from the DOM and CSSOM, then performs layout by calculating element positions. 4. It paints the pixels to the screen and does compositing by building layers for elements.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views12 pages

    How Browser Work

    Uploaded by

    Virender Sahu
    The document summarizes the key steps involved in rendering a webpage from HTML and CSS code: 1. The browser first receives bytes of data from the server, which are converted to characters and parsed into a DOM tree. 2. Styles from CSS files are also parsed and used to build a CSSOM tree, which is then combined with the DOM tree. 3. The browser generates a render tree from the DOM and CSSOM, then performs layout by calculating element positions. 4. It paints the pixels to the screen and does compositing by building layers for elements.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 12

    rootlearn.

    com

    HTML
    Lifecycle of a webpage

    root
    Google .

    linkedin.com

    Manish Poduval
    1/11 rootlearn.com

    root
    The steps involved
    Have you ever wondered how does your browser render
    HTML pages from the internet ?
    There is a lot going on
    Google .
    linkedin.com that we don’t see
    ?

    Byte Parsing Styles Layout Painting Composite


    Decoder

    Manish Poduval
    2/11 rootlearn.com

    root
    Before we begin
    When you type in some url in your browser, a lot
    happens behind the scenes on how it fetches data
    from the internet
    Navigation DNS lookups
    Congestion control
    Browser Data
    rootlearn.com
    Learn How Google keeps you safe online
    ?
    Internet
    TLS Negotiation TCP Handshake

    The part that we’ll focus on


    Manish Poduval
    3/11 rootlearn.com

    root
    Byte Decoder
    The data that you actually receive from the internet is in
    the form of bytes
    The byte stream decoder Byte Decoder
    converts the bytes to a set of
    tokens
    bytes to characters
    <html><head><title>rootlearn
    </title></head><body><heade
    3C 62 6F 64 7H 87 4C 79 3E 61 r>ROOT</header><p>I'mMani
    3E 85 70 71 6F H4 2F 12 41 3C sh</p></div>
    62 6F 6F 7H 87 4C 79 3E 61 3E
    85 70 71 6F H4 2F 12 41 3C 62
    6F 6F 7H 87 4C 79 3E 61 3E 85 characters to tokens
    70 71 6F H4 2F 12 41

    startTag: html startTag: head startTag: title


    content: rootlearn endTag: title
    endTag: head startTag: body . . . . . .

    Manish Poduval
    4/11 rootlearn.com

    root
    2. Parsing
    The parser starts converting the tokens it receives to a set
    of nodes and creates the DOM tree
    Parser
    startTag: html startTag: head Nodes
    startTag: title html head title
    content: rootlearn body div
    endTag: title endTag: head DOM
    startTag: body html
    head body
    meta title header div
    Hello I’m Manish

    Manish Poduval
    5/11 rootlearn.com

    root
    3. Recalculating styles
    It repeats this whole process with a CSS file as well and
    creates a CSSOM tree
    Byte Decoder Parser
    3C 62 6F 64 7H 87 4C 79
    3E 61 3E 85 70 71 6F H4 Characters Tokens Nodes
    2F 12 41 3C 62 6F 6F 7H

    CSSOM
    font-size: 16px body
    display: flex
    header div
    font-size: 16px;
    p h2
    margin: 20px;

    padding: 20px;
    font-wight: bold color: red

    Manish Poduval
    6/11 rootlearn.com

    root
    Generating the render tree
    The browser combines th DOM and CSSOM and creates the
    render tree. It’s the visible content on the screen
    DOM CSSOM
    html font-size: 16px body display: flex
    head body header div
    meta title header div font-size: 16px;

    margin: 20px;
    p h2
    padding: 20px;
    Hello I’m Manish font-wight: bold
    color: red

    Render Tree
    font-size: 16px body display: flex
    header div I’m Manish
    Hello
    font-size: 16px;

    margin: 20px;
    p h2 Some title
    padding: 20px;
    font-wight: bold lorem color: red

    Manish Poduval
    7/11 rootlearn.com

    root
    4. Layout
    The browser then starts generating the layout of the page using
    the render tree
    Render Tree Layout
    Google .

    body
    rootlearn.com
    font-size: 16px display: flex
    header div I’m Manish
    Hello
    font-size: 16px;

    margin: 20px;

    padding: 20px; p h2 Some title

    lorem color: red


    font-wight: bold

    The browser is trying to figure out where to position elements


    Manish Poduval
    8/11 rootlearn.com

    root
    5. Paint
    Once the layout is generated, the next step is to paint the pixels on
    the screen
    Layout Paint
    Google . Google .
    rootlearn.com rootlearn.com

    PS: It also adds in text although it’s not shown in the visuals
    Manish Poduval
    9/11 rootlearn.com

    root
    6. Compositing
    In this step the browser builds layers on the screen depending on
    how elements need to appear (above/below some other elements)
    Things like position: absolute
    Google . Google .
    rootlearn.com rootlearn.com

    Manish Poduval
    10/11 rootlearn.com
    To summarize it again, here’s what happens from the point the
    browser receives the data till it renders on the page

    Byte Parsing Styles Layout Painting Composite


    Decoder

    Google .
    linkedin.com

    Manish Poduval
    Want to be a part of root ?

    Scan to upskill
    yourself

    You might also like