The document discusses various techniques for improving web performance, including:
1. Reducing the number of server requests by concatenating CSS and JavaScript files, using CSS sprites for images, and inlining small images and resources.
2. Optimizing front-end performance by putting stylesheets at the top, scripts at the bottom, loading scripts asynchronously, and batching DOM and CSS changes.
3. Understanding that performance optimizations involve tradeoffs and that the rules can conflict depending on specific user, site, and technical factors. Optimization requires testing across environments.
27. Rendering is parsing
render
HTML DOM TREE
<html> - document
<head> - elem: html
- elem: head
<title>Title</title> - elem: title
</head> - text: Title
<body> - elem: body
<div>This is a Text</div> - elem: div
- text: This is a Text
<div id="hidden">Hidden</div>
- elem: div
- attr: id=hidden
- text: Hidden
CSS STYLE STRUCT
- selector: body
rule:
body {
display: block # default css
padding: 0; padding-bottom: 0px # site css
} padding-left: 0px # site css
#hidden { padding-right: 0px # site css
display: none; padding-top: 0px # site css
- selector: hidden
} rule:
display: none # site css
28. Rendering is layout
render
DOM TREE
- document
- elem: html
- elem: head
- elem: title
- text: Title
reflow
- elem: body
- elem: div RENDER TREE
- text: This is a Text
- elem: div
- root
- attr: id=hidden
- text: Hidden
- body
- block
STYLE STRUCT - inline: This is
- selector: body - inline: a Text
rule:
display: block # default css
padding-bottom: 0px # site css
padding-left: 0px # site css
padding-right: 0px # site css
padding-top: 0px # fsite css
- selector: hidden
rule:
display: none # site css
29. Rendering is painting
render
RENDER TREE
repaint
- root
This is
- body
- block
- inline: This is
a Text
- inline: a Text
30. Rendering is execution
render
INPUT
EVENT QUEUE
mouse moved
mouse pressed
OS mouse released
key pressed
key released
31. Execution in one thread
render
mouse moved EVENT QUEUE
mouse pressed
mouse released
key pressed
key released
Native
Javascript
Browser
Execution
Action
32. Once upon a time...
Static pages
Few resources
Less javascript
33. Most time on server
domain connect send receive render