Rendering is parsing
render
HTML DOM TREE
<html> - document
<head> - elem: html
<title>Title</title> - elem: head
- elem: title
</head> - text: Title
<body> - elem: body
<div>This is a Text</div> - elem: div
<div id="hidden">Hidden</div> - text: This is a Text
- 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
padding-right: 0px # site css
#hidden { padding-top: 0px # site css
display: none; - selector: hidden
} rule:
display: none # site css
Rendering is layout
render
DOM TREE
reflow
- document
- elem: html
- elem: head
- elem: title
- text: Title
- elem: body
- elem: div RENDER TREE
- text: This is a Text
- elem: div
- attr: id=hidden - root
- text: Hidden
- body
- block
STYLE STRUCT - inline: This is
- inline: a Text
- selector: body
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
Rendering is painting
render
RENDER TREE re p a in t
This is
- root
a Text
- body
- block
- inline: This is
- inline: a Text
Rendering is execution
render
INPUT
EVENT QUEUE
mouse moved
mouse pressed
mouse released
OS key pressed
key released
Execution in one thread
render
mouse moved EVENT QUEUE
mouse pressed
mouse released
key pressed
key released
Javascript Native
Browser
Execution Action
Once upon a time...
Static pages
Few resources
Less javascript
Most time on server
domain connect send receive render
Solution is faster
serverside
domain connect send receive render
Ajax revolution
perfo rmance
Ajax revolution
Page updating
One time
(classic) WEB
Page updating
On demand
(ajax) WEB
... later ...
Page updating
Continuous
(polling) WEB
Page updating
Push
(comet) WEB
Most time on browser
domain connect send receive render
Golden rule of faster web
80% of the end user
response time is spent
on the front-end
Golden rules of faster web
Start there.
Why web
slow parts?
Easy to understand
Each part has its rules
Which parts are
slow?
Network is slow
Less stuff
Fewer requests
Too many
resources
Concatenate js/css
Css sprites
Inline images