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

image: Browser

The Browser: #1 Enemy

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

Navigation
Reponse
Parsing
Rendering

User Interaction

Navigation

image: search results from duck-duck-go

Navigation

image: browser with no content (a white screen)

Navigation

←←←

←←←

It's not that simple...

DNS

DNS = Domain Name System

DNS Lookup

www.example.com
93.184.216.34

DNS Lookup

www.example.com == 93.184.216.34

Browser cache
Local (OS) cache
Router cache
Resolve server (Usually your Internet Service Provider).
Root server (.com, .fr)
Top level domain server
Authoritative name servers (ns3.example.com)

Steps

DNS Lookup

→→→ www.example.com →→→
←←← 93.184.216.34 ←←←

DNS Lookup

→→→ URL →→→
←←← IP ←←←

Next?

?

TCP

TCP three-way handshake

TLS Negotiation

Transmission Control Protocol
Transport Layer Security (TLS) protocol

TCP Handshake

Establish a connection

→→→ SYN →→→
←←← SYN-ACK ←←←
→→→ ACK →→→

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

→→→ URL →→→
←←← IP ←←←
→→→ SYN →→→
←←← SYN-ACK ←←←
→→→ ACK →→→

Transport Layer Security (TLS) protocol

Determines the encryption for communication

TLS Negotiation

→→→ ClientHello →→→
←←← ServerHello & Certificate ←←←
→→→ ClientKey →→→
←←← Finished ←←←
→→→ Finished →→→

→→→ URL →→→
←←← IP ←←←
→→→ SYN →→→
←←← SYN-ACK ←←←
→→→ ACK →→→
→→→ ClientHello →→→
←←← ServerHello & Certificate ←←←
→→→ ClientKey →→→
←←← Finished ←←←
→→→ Finished →→→

→→→ URL →→→
←←← IP ←←←
→→→ SYN →→→
←←← SYN-ACK ←←←
→→→ ACK →→→
→→→ ClientHello →→→
←←← ServerHello & Certificate ←←←
→→→ ClientKey →→→
←←← Finished ←←←
→→→ Finished →→→
→→→ HTTP-GET-REQUEST →→→

The Request

→→→ HTTP-GET-REQUEST →→→

The Response

←←←

It's not that simple...

The Response

←←←

←←←

TCP Slow Start

Algorithm to detect available bandwidth

⇔ DNS ⇔
⇔ SYN-SYN-ACK ⇔
⇔ TLS ⇔
→→→ HTTP-GET-REQUEST →→→
←←← 14kb ←←←
→→→ ACK →→→
←←← 28kb ←←←
→→→ ACK →→→
←←← 56kb ←←←
→→→ ACK →→→
←←← 112kb ←←←
. . .

Congestion control

Confirm delivery by returning ACK, acknowledgments of receipt

⇔ DNS ⇔
⇔ SYN-SYN-ACK ⇔
⇔ TLS ⇔
→→→ HTTP-GET-REQUEST →→→
←←← 14kb ←←←
→→→ ACK →→→
←←← 28kb ←←←
→→→ ACK →→→
←←← 56kb ←←←
→→→ ACK →→→
. . .

Congestion control

Confirm delivery by returning ACK, acknowledgments of receipt

→→→ HTTP-GET-REQUEST →→→
←←← 14kb ←←←
→→→ ACK →→→
←←← 28kb ←←←
→→→ ACK →→→
←←← 56kb ←←←
→→→ ACK →→→
←←← 112kb ←←←
. . .
←←← 56kb ←←←
→→→ ACK →→→
. . .

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

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>

JavaScript

<script>	RENDER	PAUSE		RENDER
		DOWNLOAD
			EXECUTE

<script defer>	RENDER
		DOWNLOAD
					EXECUTE

<script async>	RENDER		PAUSE	RENDER
		DOWNLOAD
			EXECUTE

DOM

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

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

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

interpreted
compiled ^*
parsed
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

Style
Layout
Paint
Compositing

Main Thread

HTML Analysis / DOM Creation
CSS Analysis / CSSOM Creation
Conversion of JS to JS AST
JavaScript Execution
DOM and CSSOM analysis / Rendering

Main Thread

HTML analysis / DOM creation
CSS analysis / CSSOM creation
Conversion to JS to JS AST
Running javascript
DOM and CSSOM analysis / Rendering
Layout
Paint
Interaction
Animation?

Rendering

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

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

img {
    width: 100%;
    
  }

<img src="myImage.jpg" alt="image description "/>

Layout (New in 2019)

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:

re-style
re-layout
re-paint
re-composite

Recalculate almost everything!

Reflow

img {
    width: 100%;
    
  }

<img src="myImage.jpg" alt="image description "/>

Re-Layout not necessary

img {
    width: 100%;
    height: auto;
  }

<img src="myImage.jpg" alt="image description "
    width="100" height="100"/>

re-style
re-layout
re-paint
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

Estelle Weyl

standardista.com
@estellevw
@standardista

estelle.github.io/rendering