Browsers: Populating the page

estelle.github.io/rendering

Web Performance

Web Performance *IS* User Experience

User Experience

  • UX
  • Performance
  • Internationalization
  • Accessibility
  • Security
  • Confidentiality

Web performance

  • Time to interactive
  • Server
  • PerformanceTiming API
  • First Contentful Paint (FCP)
  • Jank
  • Perceived Performance

The Browser

The Browser

image: Browser

The Browser: #1 Enemy

timer server

The time it takes to get all the resources from all the servers

The Browser: Friend AND Foe

image: fil

Mobile Networks

The longest delay is the time it takes to make the round trip time between the phone and the cell tower. Air is the greatest cause of latency

The Power of Mobile

Mobile browsers are super powerful. Mobile devices are not

The Browser

image: server

The Browser

image: browser with duck-duck-go loaded

The Browser

image: web page with duck-duck-go search results

The Browser

image: browser with a white screen

<!doctype HTML>
<html lang="en-us">
 <head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My site</title>
  <link rel="stylesheet" src="styles.css"/>
  <script src="myscript.js"></script>
</head>
<body>
  <h1>My Page</h1>
  <p>A paragraph with an <a href="//example.com">link</a></p>
  <figure>
    <img src="myImage.jpg" alt="description of the image"/>
    <caption>My photo</caption>
  </figure>
  <script src="anotherscript.js"></script>
</body>
</html>

It's not that simple...

Web Performance

Populating the page

  1. Navigation
  2. Reponse
  3. Parsing
  4. Rendering

User Interaction

Navigation

Navigation

image: search results from duck-duck-go

Navigation

image: browser with no content (a white screen)

Navigation

lap top computer
←←←
HTML content
←←←
server

It's not that simple...

DNS

DNS = Domain Name System

DNS Lookup

  • www.example.com

    human thinking
  • 93.184.216.34

    computer thinking

DNS Lookup

www.example.com == 93.184.216.34
  1. Browser cache
  2. Local (OS) cache
  3. Router cache
  4. Resolve server (Usually your Internet Service Provider).
  5. Root server (.com, .fr)
  6. Top level domain server
  7. Authoritative name servers (ns3.example.com)

Steps

DNS Lookup

lap top computer
  • →→→ www.example.com →→→
    ←←← 93.184.216.34 ←←←
server

DNS Lookup

lap top computer
  • →→→ URL →→→
    ←←← IP ←←←
server

Next?

lap top computer
    →→→ ? →→→
server

TCP

TCP three-way handshake

TLS Negotiation

Transmission Control Protocol
Transport Layer Security (TLS) protocol

TCP Handshake

Establish a connection

lap top computer
  • →→→ SYN →→→
    ←←← SYN-ACK ←←←
    →→→ ACK →→→
server

The host, usually the browser, sends a TCP SYNchronize packet to the server. The server receives the SYN and sends back a SYNchronize ACKnowledgment. The host receives the SYN-ACK from the server and sends an ACKnowledgment. The server receives ACK and the TCP socket connection is established.

TLS Negotiation

lap top computer
  • →→→ URL →→→
    ←←← IP ←←←
  •  
  • →→→ SYN →→→
    ←←← SYN-ACK ←←←
    →→→ ACK →→→
server

Transport Layer Security (TLS) protocol

Determines the encryption for communication

TLS Negotiation

lap top computer
  • →→→ ClientHello →→→
    ←←← ServerHello & Certificate ←←←
    →→→ ClientKey →→→
    ←←← Finished ←←←
    →→→ Finished →→→
server
lap top computer
  • →→→ URL →→→
    ←←← IP ←←←
  •  
  • →→→ SYN →→→
    ←←← SYN-ACK ←←←
    →→→ ACK →→→
  •  
  • →→→ ClientHello →→→
    ←←← ServerHello & Certificate ←←←
    →→→ ClientKey →→→
    ←←← Finished ←←←
    →→→ Finished →→→
server
lap top computer
  • →→→ URL →→→
    ←←← IP ←←←
  •  
  • →→→ SYN →→→
    ←←← SYN-ACK ←←←
    →→→ ACK →→→
  •  
  • →→→ ClientHello →→→
    ←←← ServerHello & Certificate ←←←
    →→→ ClientKey →→→
    ←←← Finished ←←←
    →→→ Finished →→→
  • →→→ HTTP-GET-REQUEST →→→
server

The Request

lap top computer
  • →→→ HTTP-GET-REQUEST →→→
server

The Response

The Response

lap top computer
←←←
HTML content
←←←
server

It's not that simple...

The Response

lap top computer
←←←
HTML web page cut in half
←←←
server

TCP Slow Start

Algorithm to detect available bandwidth

lap top computer
  • DNS
  • SYN-SYN-ACK
  • TLS
  • →→→ HTTP-GET-REQUEST →→→
  • ←←← 14kb ←←←
    →→→ ACK →→→
    ←←← 28kb ←←←
    →→→ ACK →→→
    ←←← 56kb ←←←
    →→→ ACK →→→
    ←←← 112kb ←←←
  • . . .
server

Congestion control

Confirm delivery by returning ACK, acknowledgments of receipt

lap top computer
  • DNS
  • SYN-SYN-ACK
  • TLS
  • →→→ HTTP-GET-REQUEST →→→
  • ←←← 14kb ←←←
    →→→ ACK →→→
    ←←← 28kb ←←←
    →→→ ACK →→→
    ←←← 56kb ←←←
    →→→ ACK →→→
    . . .
server

Congestion control

Confirm delivery by returning ACK, acknowledgments of receipt

lap top computer
  • →→→ HTTP-GET-REQUEST →→→
  • ←←← 14kb ←←←
    →→→ ACK →→→
    ←←← 28kb ←←←
    →→→ ACK →→→
    ←←← 56kb ←←←
    →→→ ACK →→→
    ←←← 112kb ←←←
    . . .
  • ←←← 56kb ←←←
    →→→ ACK →→→
    . . .
server

Reponse

<!doctype HTML>
<html lang="en-us">
 <head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My site</title>
  <link rel="stylesheet" src="styles.css"/>
  <script src="myscript.js"></script>
</head>
<body>
  <h1>My Page</h1>
  <p>A paragraph with an <a href="//example.com">link</a></p>
  <figure>
    <img src="myImage.jpg" alt="image description"/>
    <caption>My photo</caption>
  </figure>
  <script src="anotherscript.js"></script>
</body>
</html>

Parsing

Parsing

  • DOM
  • CSSOM
  • AOM
  • AST / Compilation JS

It's not that simple

  • Starts immediately (14kb)
  • Main thread
  • Preload Scanner
  • Critical Rendering Path = 5 steps

DOM

Document Object Model,
describes the content

DOM

Preload scanner

Requests high priority resources

<link rel="stylesheet" src="styles.css"/>
<script src="myscript.js" async></script>
<img src="myImage.jpg" alt="image description"/>
<script src="unautrescript.js" defer></script>
not the main thread

JavaScript

<script> RENDER         PAUSE RENDER
DOWNLOAD
EXECUTE
<script defer> RENDER
DOWNLOAD
EXECUTE
<script async> RENDER PAUSE RENDER
DOWNLOAD
EXECUTE

DOM

DOM

DOM tree

DOM

<!doctype HTML>
<html lang="en-us">
 <head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My site</title>
  <link rel="stylesheet" src="styles.css"/>
  <script src="myscript.js"></script>
</head>
<body>
  <h1>My Page</h1>
  <p>A paragraph with <a href="//example.com">link</a></p>
  <figure>
    <img src="myImage.jpg" alt="image description"/>
    <caption>My photo</caption>
  </figure>
  <script src="anotherscript.js"></script>
</body>
</html>

CSSOM

Describes the style rules

CSSOM

:root {
  font-size: 16px;
}
body {
  color: #333333;
}
h1 {
  font-size: 2rem;
}
p a {
  color: blue;
}
figure img {
  border: none;
  width: 100%;
}

CSSOM

CSSOM
:root {
  font-size: 16px;
}
body {
  color: #333333;
}
h1 {
  font-size: 2rem;
}
p a {
  color: blue;
}
figure img {
  border: none;
  width: 100%;
}

CSSOM

CSSOM
:root {
  font-size: 16px;
}
body {
  color: #333333;
}
h1 {
  font-size: 2rem;
}
p a {
  color: blue;
}
img {
  border: none;
  width: 100%;
}

AOM

image: screen shot of accessiblity tab showing accessiblity names

Until the construction of the AOM, the content is not accessible to screen readers.

JavaScript Compilation

  1. interpreted
  2. compiled *
  3. parsed
  4. executed **

*Analyzed in abstract syntax trees, generating optimize and / or binary code executed on the main thread .

**Will generate an error if JavaScript is executed on a DOM node that has not yet been encountered

Screen shot of a simple javascript event handler in ASTExplorer.net

Rendering

Rendering

  1. Style
  2. Layout
  3. Paint
  4. Compositing

Main Thread

Main thread
  1. HTML Analysis / DOM Creation
  2. CSS Analysis / CSSOM Creation
  3. Conversion of JS to JS AST
  4. JavaScript Execution
  5. DOM and CSSOM analysis / Rendering

Main Thread

Main thread
  1. HTML analysis / DOM creation
  2. CSS analysis / CSSOM creation
  3. Conversion to JS to JS AST
  4. Running javascript
  5. DOM and CSSOM analysis / Rendering
  6. Layout
  7. Paint
  8. Interaction
  9. Animation?

Rendering

DOM and CSSOM: combined to form the rendering tree. Contains only the nodes necessary to render the page.

render process

Style

Creation of the "Render Tree" - Computed Styles

  • UA stylesheets
  • User style sheets
  • Cascade
  • visibility: hidden: yes
  • display: none: no

Determines the CSS rules for each visible (and hidden) node.

Layout

Calculate the layout of each visible element

Determine the dimensions of all nodes in the render tree

Layout

screen shot of mobile screen
img {
    width: 100%;
    
  }
<img src="myImage.jpg" alt="image description "/>

Layout (New in 2019)

screen shot of mobile screen
img {
    width: 100%;
    height: auto;
  }
<img src="myImage.jpg" alt="image description "
    width="100" height="100"/>

Paint

  • Render pixels on screen
  • Number of pixels = h * w * dppx
  • Find the [r, g, b, a] for each pixel.
  • Frame buffer = array of array [r, g, b, a]
  • first paint / first meaningful paint

Composite: Paint layers on the GPU

  • animate opacity or transformations
  • 3D transforms
  • higher z-index
  • <video> and <canvas>
  • CSS Filters
  • will-change property
  • isolation: isolate

Fast on the GPU

Merge the layers to calculate the
RGBA value of each pixel

[255, 165, 0, 1]
[0, 0, 0, 0.2]
[204, 132, 0, 1]

Reflow

When a change is made:

  1. re-style
  2. re-layout
  3. re-paint
  4. re-composite

Recalculate almost everything!

Reflow

screen shot of mobile screen
img {
    width: 100%;
    
  }
<img src="myImage.jpg" alt="image description "/>

Re-Layout not necessary

screen shot of mobile screen
img {
    width: 100%;
    height: auto;
  }
<img src="myImage.jpg" alt="image description "
    width="100" height="100"/>
  1. re-style
  2. re-layout
  3. re-paint
  4. re-composite?

User Interaction

The Goal

No blocking on the main thread. Should respond to the user in less than 50ms and animate in less than 16.67ms (60fps)

  • jank
  • scroll
  • user interaction
  • animation

Thanks

https://estelle.github.com/rendering
@estellevw