Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • How Browser Work - Critical Rendering Path

    Cargado por

    ion2010
    21 vistas40 páginas
    How Browser Work - Critical Rendering Path

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    How Browser Work - Critical Rendering Path

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    21 vistas40 páginas

    How Browser Work - Critical Rendering Path

    Cargado por

    ion2010
    How Browser Work - Critical Rendering Path

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 40

    How Browsers Work

    The Critical Rendering Path Explained


    Main Browser Components
    User Interface

    Data Storage
    Browser Engine

    Rendering Engine

    JavaScript Display
    Networking XML Parser
    Interpreter Backend

    Source: “A Reference Architecture for Web Browsers” by Alan Grosskurth and Michael Godfrey
    Main Browser Components
    User Interface

    Data Storage
    Browser Engine

    Rendering Engine

    JavaScript Display
    Networking XML Parser
    Interpreter Backend

    Source: “A Reference Architecture for Web Browsers” by Alan Grosskurth and Michael Godfrey
    Rendering Engines
    Browser Rendering Engine

    Safari WebKit

    Chrome Blink

    Opera Blink

    Firefox Gecko

    Internet Explorer Trident

    Edge EdgeHTML
    Rendering Engine:
    The Main Flow

    DOM

    Render Tree Layout Painting

    CSSOM
    Rendering Engine:
    The Main Flow

    DOM

    Render Tree Layout Painting

    CSSOM
    Example Markup
    HTML Parser

    Bytes Characters Tokens Nodes DOM


    HTML Parser

    Tokenisation Tree construction

    Bytes Characters Tokens Nodes DOM


    HTML Parser: Bytes
    Bytes Characters Tokens Nodes DOM

    3C 68 74 6D 6C 3E 3C 68 61 64 3E

    3C 6D 65 74 61 6E 61 6D 65 3D 22

    76 69 65 77 70 6F 72 74 22 …

    3C 2F 68 74 6D 6C 3E
    HTML Parser: Characters
    Bytes Characters Tokens Nodes DOM

    <html><head>…</head><body><h1>DOM
    Example</h1><p>…</p></body></html>
    HTML Parser: Tokens
    Bytes Characters Tokens Nodes DOM

    StartTag: <html> EndTag: </html>

    AttributeName: AttributeValue:
    class “outer”

    Text
    Tokenisation: Output
    StartTag: html StartTag: head StartTag: meta StartTag: link

    StartTag: title DOM Example EndTag: title EndTag: head

    StartTag: body StartTag: h1 DOM Example EndTag: h1

    StartTag: p … StartTag: span … EndTag: span … EndTag: p

    AttributeName: AttributeValue:
    StartTag: img EndTag: body EndTag: html
    src example.jpg
    HTML Parser: Syntax Analysis
    Bytes Characters Tokens Nodes DOM

    html head meta link title

    body h1 p span img

    elit, sed do eiusmod


    Lorem ipsum consectetur tempor incididunt ut
    DOM Example
    dolor sit amet, adipiscing labore et dolore magna
    aligua.
    HTML Parser: DOM
    Bytes Characters Tokens Nodes DOM

    html

    head body

    meta link title h1 p img

    span

    Lorem ipsum consectetur elit, sed do


    DOM Example
    dolor sit amet, adipiscing …
    Rendering Engine:
    The Main Flow

    DOM

    Render Tree Layout Painting

    CSSOM
    Example CSS
    CSS Parser

    Bytes Characters Tokens Nodes CSSOM


    CSS Style Objects
    CSSStyleSheet

    CSSRule CSSRule CSSRule

    Selector Declaration Selector Declaration Selector Declaration

    body h1 p

    font-size 12px font-size 16px color red


    CSS Object Model

    font-size: 12px body

    font-size: 12px
    h1 p img
    color: red

    font-size: 12px font-size: 12px


    font-size: 16px font-size: 12px float: right
    span
    color: red
    color: blue
    display: none
    Rendering Engine:
    The Main Flow

    DOM

    Render Tree Layout Painting

    CSSOM
    Render tree construction
    DOM CSSOM

    Render tree

    =
    Render tree construction: DOM

    html

    head body

    meta link title h1 p img

    span

    Lorem ipsum consectetur elit, sed do


    DOM Example
    dolor sit amet, adipiscing …
    Render tree construction: DOM

    html

    head body

    meta link title h1 p img

    span

    Lorem ipsum consectetur elit, sed do


    DOM Example
    dolor sit amet, adipiscing …
    Render tree construction:
    style computation
    font-size: 12px body

    font-size: 16px font-size: 12px


    h1 p img float: right

    font-size: 12px
    color: red

    Lorem ipsum elit, sed do


    DOM Example
    dolor sit amet, …
    Rendering Engine:
    The Main Flow

    DOM

    Render Tree Layout Painting

    CSSOM
    Box Model
    margin
    border
    padding

    width x height
    Box types
    block

    inline inline inline

    block

    inline
    Positioning
    • Normal flow
    • box formatting context (block and inline)
    • relative positioning
    • Floats
    • first: lay out box according to normal flow
    • then: push as far left/right as possible
    • Absolute and fixed positioning
    • box is taken out of normal flow
    • positioned dependent on the box’s containing

    block (absolute) or the viewport (fixed)


    Layout process

    • global vs. incremental layout


    • dirty bit system
    • placement, width & height calculation
    Layout example
    Layout process:
    width calculation

    div.inner div.outer viewport


    Example Markup
    Rendering Engine:
    The Main Flow

    DOM

    Render Tree Layout Painting

    CSSOM
    Painting
    Reflow vs. Repaint
    • reflow and repaint

    JS Style Layout Paint Composite

    • repaint

    JS Style Layout Paint Composite

    • no reflow/repaint

    JS Style Layout Paint Composite


    Summary

    DOM

    Render Tree Layout Painting

    CSSOM
    JavaScript Execution
    <script>

    <script defer>

    <script async>

    Parse HTML Download script

    HTML parser idle Execute script


    Optimization
    • Optimize time to first render by minimizing[1]
    • number of critical resources
    • critical path length
    • number of critical bytes
    References and further reading
    [1] Google Web Fundamentals: Critical Rendering Path by Ilya Grigorik

    [2] Google Web Fundamentals: Rendering Performance by Paul Lewis

    [2] How browsers work: Behind the scenes of modern web browsers by Tali Garsiel

    [3] W3C: HTML 5 - A vocabulary and associated APIs for HTML and XHTML

    [4] W3C: Cascading Style Sheet Level 2 Revision 1 (CSS 2.1) Specification

    [5] W3C: DOM4

    [5] A Reference Architecture for Web Browsers by Alan Grosskurth and Michael W. Godfrey

    [6] Understanding the critical rendering path, rendering pages in 1 second by Luis Vieira

    [7] Usability Engineering by Jakob Nielsen

    [8] Response Times: The 3 Important Limits by Jakob Nielsen

    [9] Optimising the Critical Rendering Path by Stephan Max

    [10] CSS Mastery - Advanced Web Standard Solutions by Andy Budd

    También podría gustarte