Slide 1
Slide 1 text
So, you want to be a
StirTrek 2012,
@dmosher
front-end
engineer
Thursday, 3 May, 12
Slide 2
Slide 2 text
“dev”olution
designer
hacker
developer
engineer
Thursday, 3 May, 12
Slide 3
Slide 3 text
Hey Look Buddy,
I’m an Engineer.
That means I solve
Problems.
http://www.youtube.com/watch?v=ipYkuCZ2IYI
Thursday, 3 May, 12
Slide 4
Slide 4 text
http://bit.ly/how-browsers-work
Tali Garsiel & Paul Irish
Thursday, 3 May, 12
Slide 5
Slide 5 text
lesson plan
1. Understand Browsers
2. Understand Best Practices
Thursday, 3 May, 12
Slide 6
Slide 6 text
BROWSERS
>> the most volatile
programming environment the
world has ever known.
Thursday, 3 May, 12
Slide 7
Slide 7 text
Paul Irish
“As a web developer, learning
the inte rnals of browse r
operations helps you make
better decisions and know the
j u s t i f i c a t i o n s b e h i n d
development best practices.”
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
Thursday, 3 May, 12
Slide 8
Slide 8 text
browsers:
UI
Browsing
Engine
Render
Engine
Network
JS
Engine
UI
Backend
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_browser_high_level_structure
Thursday, 3 May, 12
Slide 9
Slide 9 text
MAIN FLOW:
Parse
HTML
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_main_flow
DOM
Tree
Render
Tree
the rendering
engine requests
the document in
8k chunks from
the network layer.
Layout
& Paint
Thursday, 3 May, 12
Slide 10
Slide 10 text
parsing in General:
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Grammars
input
lexical
analysis
syntax
analysis
output
Thursday, 3 May, 12
Slide 11
Slide 11 text
http://en.wikipedia.org/wiki/Backus-Naur_Form
parsing: a simple example
::= __expression__
input: 2 + 3 - 1
INTEGER :0|[1-9][0-9]*
PLUS : +
MINUS : -
expression := term operation term
operation := PLUS | MINUS
term := INTEGER | expression
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#context_free_grammar
Thursday, 3 May, 12
Slide 12
Slide 12 text
parsing HTML:
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Grammars
document
tokenizer tree
construction
DOM Tree
Thursday, 3 May, 12
Slide 13
Slide 13 text
you think parsing
easy?!? parsing HTML
heavy duty... due to
lack of “context
free grammar!”
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#context_free_grammar
Thursday, 3 May, 12
Slide 14
Slide 14 text
html definition:
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#HTML_DTD
Vocabulary and syntax
of html are defined
in specs created by
the w3c.
Thursday, 3 May, 12
Slide 15
Slide 15 text
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_tokenization_algorithm
Tokeniser
Tree
construction
DOM
parsing algorithm
Script
Execution
document.write()
Thursday, 3 May, 12
Slide 16
Slide 16 text
BEST PRACTICE
move scripts to the
bottom of the page
Thursday, 3 May, 12
Slide 17
Slide 17 text
document object model:
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#DOM
HTMLHtmlElement
HTMLBodyElement
HTMLParagraphElement HTMLDivElement
Text HTMLImageElement
Thursday, 3 May, 12
Slide 18
Slide 18 text
PARSING HTML:
FORGIVING
CONTINUOUS
COMPLEX
Thursday, 3 May, 12
Slide 19
Slide 19 text
MAIN FLOW:
Parse
HTML
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_main_flow
DOM
Tree
Render
Tree
YOU NEVER GET “INVALID
SYNTAX” ERRORS ON AN
HTML PAGE. BROWSERS
FIX INVALID CONTENT
AND MOVE ON.
Layout
& Paint
Thursday, 3 May, 12
Slide 20
Slide 20 text
parsing CSS:
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing
Flex / Bison
Stylesheet
Object
the css spec defines
css lexical and
syntax grammar.
Webkit uses flex and bison
parser generators to
create parsers from
css grammar files.
Thursday, 3 May, 12
Slide 21
Slide 21 text
parsing css much
easier.
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing
Thursday, 3 May, 12
Slide 22
Slide 22 text
css vocabulary
comment \/\*[^*]*\*+([^/*][^*]*\*+)*\/
num [0-9]+|[0-9]*”.”[0-9]+
nonascii [\200-\377]
nmstart [_a-z]|{nonascii}|{escape}
nmchar [_a-z0-9-]|{nonascii}|{escape}
name {nmchar}+
ident {nmstart}{nmchar}*
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing
“ident” is short for
identifier, like a
class name.
“name” is an element
id (that is referred
by “#”).
Thursday, 3 May, 12
Slide 23
Slide 23 text
css GRAMMAR
ruleset
: selector [ ‘,’ S* selector ]*
‘{‘ S* declaration [ ‘;’ S*declaration ]* ‘}’ S*
;
selector
: simple_selector [ combinator selector | S+ [ combinator? selector ]? ]?
;
simple_selector
: element_name [ HASH | class | attrib | pseudo ]*
| [ HASH | class | attrib | pseudo ]+
;
class
: ‘.’ IDENT
;
element_name
: IDENT | ‘*’
;
attrib
: ‘[‘ S* IDENT S* [ [ ‘=’ | INCLUDES | DASHMATCH ] S*
[ IDENT | STRING ] S* ‘]’
;
pseudo
: ‘:’ [ IDENT | FUNCTION S* [IDENT S*] ‘)’ ]
;
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing
Thursday, 3 May, 12
Slide 24
Slide 24 text
RULESET DEFINITION
ruleset
: selector [ ‘,’ S* selector ]*
‘{‘ S* declaration [ ‘;’ S*declaration ]* ‘}’ S*
;
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing
div.error, a.error {
color: red;
font-weight: bold;
}
Thursday, 3 May, 12
Slide 25
Slide 25 text
STYLESHEET OBJECT:
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#DOM
CSSStyleSheet
CSSRule
Selectors Declaration
div.error color
a.error red
Thursday, 3 May, 12
Slide 26
Slide 26 text
PARSING CSS:
AUTOMA
TIC
SINGLE PASS
SIMPLE
Thursday, 3 May, 12
Slide 27
Slide 27 text
processing resources:
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_order_of_processing_scripts_and_style_sheets
Synchronous Speculative
Order
Matters
Single
Threaded*
Thursday, 3 May, 12
Slide 28
Slide 28 text
BROWSERS ARE
SYNCHRONOUS
processing order....
regarding
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_order_of_processing_scripts_and_style_sheets
Thursday, 3 May, 12
Slide 29
Slide 29 text
browsers render
in a single thread
BROWSERS ARE
SINGLE THREADED?
Thursday, 3 May, 12
Slide 30
Slide 30 text
the event loop
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Event_loop
while (!mExiting)
NS_ProcessNextEvent(thread);
The browser main thread
is an infinite event loop
that keeps the process
alive. it waits for events
and processes them.
Thursday, 3 May, 12
Slide 31
Slide 31 text
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_rendering_engines_threads
i have a single main
thread that handles
processing of events
in an event loop.
i have a separate main
thread that lives in a
process for each tab
that is opened.
Thursday, 3 May, 12
Slide 32
Slide 32 text
happens in a
SINGLE THREAD
except network operations
everything
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_rendering_engines_threads
Thursday, 3 May, 12
Slide 33
Slide 33 text
speculative parsing:
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Speculative_parsing
main thread
.
{HTMLNodes}
.
.
{external js}
.
{external css}
.
{external img}
.
.
speculative thread
.
.
.
.
[load js http]
.
[load css http]
.
[load img http]
.
.
Thursday, 3 May, 12
Slide 34
Slide 34 text
style information
scripts ASK for
WHAT IF MY
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_order_of_processing_scripts_and_style_sheets
during parsing?
Thursday, 3 May, 12
Slide 35
Slide 35 text
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Speculative_parsing
I block all scripts
when a style sheet is
being loaded and
parsed.
i block scripts only
when they try to access
certain style
properties that may be
affected by unloaded
stylesheets.
Thursday, 3 May, 12
Slide 36
Slide 36 text
PARSING RECAP:
SPECULA
TIVE
SYNCHRONOUS
ORDER MA
TTERS
SINGLE THREADED*
Thursday, 3 May, 12
Slide 37
Slide 37 text
RENDER TREE:
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Render_tree_construction
class RenderObject {
virtual void layout();
virtual void paint(PaintInfo);
virtual void rect repaintRect();
Node* node; //the DOM node
RenderStyle* style; // computed style
RenderLayer* containingLayer; // containing z-index layer
}
each renderer represents
a rectangular area
usually corresponding to
the nodes css box as
described by the
css2 spec.
Thursday, 3 May, 12
Slide 38
Slide 38 text
node “display”:
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Render_tree_construction
switch (style->display) {
case NONE:
break;
case INLINE:
o = new (arena) RenderInline(node);
break;
case BLOCK:
o = new (arena) RenderBlock(node);
break;
case INLINE_BLOCK:
o = new (arena) RenderBlock(node);
break;
case LIST_ITEM:
o = new (arena) RenderListItem(node);
break;
...
}
Thursday, 3 May, 12
Slide 39
Slide 39 text
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Render_tree_construction
Document
html
body
div
p
h1
“Hello”
“Web page”
head
title
“Web page”
Viewport
Scroll
Block
Block
Block
Block Block
Text
Text
DOM tree vs render tree:
Thursday, 3 May, 12
Slide 40
Slide 40 text
style computation:
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#style_computation
style information comes
from browser style sheets,
user style sheets,
author style sheets,
inline styles and
visual properties (bgcolor)
Thursday, 3 May, 12
Slide 41
Slide 41 text
IS VERY HARD
COMPUTATION
STYLE
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_order_of_processing_scripts_and_style_sheets
Thursday, 3 May, 12
Slide 42
Slide 42 text
style computation:
1. Style data is VERY LARGE
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#style_computation
2. Rule matching is HEAVY
3. CASCADE is COMPLEX
Thursday, 3 May, 12
Slide 43
Slide 43 text
style sources
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_order_of_processing_scripts_and_style_sheets
Browser User
Author Inline
Thursday, 3 May, 12
Slide 44
Slide 44 text
cascade priority:
the-css-cascade.pdf
Browser
Normal
Important
(low) Priority (high)
Thursday, 3 May, 12
Slide 45
Slide 45 text
BEST PRACTICE
Don’t use CSS Resets.
(if you must, use normalize.css)
necolas.github.com/normalize.css/
Thursday, 3 May, 12
Slide 46
Slide 46 text
cascade priority:
the-css-cascade.pdf
Browser
Normal
Important
User Author
User
Author
(low) Priority (high)
Thursday, 3 May, 12
Slide 47
Slide 47 text
BEST PRACTICE
LIMIT !important;
bit.ly/css-best-practices
Thursday, 3 May, 12
Slide 48
Slide 48 text
ANATOMY OF A RULE:
the-css-cascade.pdf
h2 {
color: blue;
margin: 1em;
}
selector declaration
property value
Thursday, 3 May, 12
Slide 49
Slide 49 text
conflicting css rules
ha
ve to deal with
browsers
the-css-cascade.pdf
Thursday, 3 May, 12
Slide 50
Slide 50 text
Specificity:
the-css-cascade.pdf
a = inline
b = ids
c = classes
d = element div, p, a
.error
#footer
a > b > c > d Thursday, 3 May, 12
Slide 51
Slide 51 text
Specificity:
the-css-cascade.pdf
h2 {
color: blue;
margin: 1em;
}
d = element
specificity: 0001 (abcd)
Thursday, 3 May, 12
Slide 52
Slide 52 text
Specificity:
the-css-cascade.pdf
#header .island a {
color: blue;
margin: 1em;
}
specificity: 0111 (abcd)
id(1)+class(1)+element(1)
Thursday, 3 May, 12
Slide 53
Slide 53 text
BEST PRACTICE
"Classes are your friends. Seeing a lot
of IDs is very bad. Try to find the
middle ground where all the
repeating visual patterns can be
abstracted. Also, keep specificity as
low as possible."
http://bit.ly/css-best-practices
@stubornella
Thursday, 3 May, 12
Slide 54
Slide 54 text
the same specificity?
multiple rules ha
ve
WHAT IF
the-css-cascade.pdf
Thursday, 3 May, 12
Slide 55
Slide 55 text
CONFLICT resolution:
1. Importance (!important)
the-css-cascade.pdf
2. Origin (Author, User, Browser)
3. Specificity (abcd)
4. Source Order
Thursday, 3 May, 12
Slide 56
Slide 56 text
rule of thumb
if two declarations
have the same
importance, origin and
specificity, the latter
specified declaration wins
the-css-cascade.pdf
Thursday, 3 May, 12
Slide 57
Slide 57 text
MAIN FLOW:
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout
Render
Tree
calculating position
and size of renderers
is called layout or
reflow.
Parse
HTML
DOM
Tree
Layout
& Paint
Thursday, 3 May, 12
Slide 58
Slide 58 text
http://www.youtube.com/watch?v=dndeRnzkJDU
Thursday, 3 May, 12
Slide 59
Slide 59 text
The layout Process
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout
1. Parent computes its width
2. Iterate over children
- place child renderer (x,y)
- call child layout if dirty
3. Parent computes its height
4. Parent sets dirty bit to false
Thursday, 3 May, 12
Slide 60
Slide 60 text
what triggers reflow?
http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
font size change
screen resize
add/remove
stylesheets
user input
:hover
changing
class attr
js changing dom offset calcs
Thursday, 3 May, 12
Slide 61
Slide 61 text
BEST PRACTICES
http://bit.ly/css-js-perf
@stubornella
make changes
“low” in DOM
animate fixed/
absolute els
avoid inline
styles
avoid tables
for layout
Thursday, 3 May, 12
Slide 62
Slide 62 text
The Box model
margin (transparent)
border
padding
content
Thursday, 3 May, 12
Slide 63
Slide 63 text
3 box display types
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout
block
inline
none
Thursday, 3 May, 12
Slide 64
Slide 64 text
how boxes appear
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout
inline inline block
inline block
Thursday, 3 May, 12
Slide 65
Slide 65 text
3 Positioning Schemes
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout
normal
float
absolute
position: static;
position: relative;
float: left;
float: right;
position: absolute;
position: fixed;
Thursday, 3 May, 12
Slide 66
Slide 66 text
float: left, right;
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout
Lorem ipsum dolor sit amet, conseceteur...
Slide 67
Slide 67 text
position: relative;
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout
1 2 3
1
2
3
Thursday, 3 May, 12
Slide 68
Slide 68 text
position: absolute/fixed;
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout
1
1
2
3
2
3
Thursday, 3 May, 12
Slide 69
Slide 69 text
The painting Process
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Painting
1. background color
2. background image
3. border
4. children
5. outline
stacking context
Thursday, 3 May, 12
Slide 70
Slide 70 text
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Painting
i optimize painting by
not adding elements
that will be hidden
beneath other
elements on repaint.
i optimize painting by
saving rectangles in a
bitmap and only paint
deltas between new and
old rectangles on
repaint.
Thursday, 3 May, 12
Slide 71
Slide 71 text
MAIN FLOW:
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout
Render
Tree
we covered a lot
of stuff!
Parse
HTML
DOM
Tree
Layout
& Paint
Thursday, 3 May, 12
Slide 72
Slide 72 text
sources
bitly.com/dmosher/bundles
@dmosher
Thursday, 3 May, 12