26. Rendering is parsing
renderrender
HTML
CSS
DOM TREE
STYLE STRUCT
<html>
<head>
<title>Title</title>
</head>
<body>
<div>This is a Text</div>
<div id="hidden">Hidden</div>
body {
padding: 0;
}
#hidden {
display: none;
}
- document
- elem: html
- elem: head
- elem: title
- text: Title
- elem: body
- elem: div
- text: This is a Text
- elem: div
- attr: id=hidden
- text: Hidden
- 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 # site css
- selector: hidden
rule:
display: none # site css
27. Rendering is layout
renderrender
DOM TREE
STYLE STRUCT
- document
- elem: html
- elem: head
- elem: title
- text: Title
- elem: body
- elem: div
- text: This is a Text
- elem: div
- attr: id=hidden
- text: Hidden
- 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
- root
- body
- block
- inline: This is
- inline: a Text
RENDER TREE
reflow
29. Rendering is execution
mouse movedmouse moved
mouse pressedmouse pressed
mouse releasedmouse released
key pressedkey pressed
key releasedkey released
renderrender
INPUT
OS
EVENT QUEUE
30. Execution in one thread
mouse movedmouse moved
mouse pressedmouse pressed
mouse releasedmouse released
key pressedkey pressed
key releasedkey released
renderrender
EVENT QUEUE
JavascriptJavascript
ExecutionExecution
NativeNative
BrowserBrowser
ActionAction
31. Once upon a time...
Few resources
Static pages
Less javascript
32. Most time on server
domaindomain connectconnect sendsend receivereceive renderrender