@naserca@func_i
Own YourFront-end PerformanceTools, Not Rules
Alex Naser @nasercaLaith Azer @func_i
devhub - devmonthApril 14, 2016
@naserca@func_i
“Don’t Be Slow”
@naserca@func_i
fast as possible response timesmeasure via benchmark
@naserca@func_i
Rules!
@naserca@func_i
Hash#mergevs
Hash#merge!
@naserca@func_i
Hash#mergevs
Hash#merge!
24x slower
@naserca@func_i
Array#unshiftvs
Array#insert
@naserca@func_i
Array#unshiftvs
Array#insert
262x slower
@naserca@func_i
Easy!
@naserca@func_i
“Don’t Be Slow”
@naserca@func_i
fast load, smooth animationsmeasure
@naserca@func_i
fast load, smooth animationsmeasure
how fast?
at what speed?
on what device(s)?
how fast?when?images?
text?
how?
@naserca@func_i
Rules?!
@naserca@func_i
CSS animationsvs
JS animations
@naserca@func_i
well…
@naserca@func_i
concat’d CSS filesvs
separate CSS files
@naserca@func_i
well…
@naserca@func_i
Hard!
@naserca@func_i
“Don’t Be Slow”
@naserca@func_i
“Don’t Be Slow”“Don’t Feel Slow”
@naserca@func_i
Title slide
Subtitle Day Month, Year
users
@naserca@func_i
Title slide
Subtitle Day Month, Year
What are they doing?
@naserca@func_i
waiting for page to loadtap nav iconwatch animation of nav barlooking for link
@naserca@func_i
waiting for page to load
LOAD
@naserca@func_i
tap nav icon
RESPOND
@naserca@func_i
watch animation of nav bar
ANIMATION
@naserca@func_i
looking for link
IDLE
@naserca@func_i
RESPONDANIMATIONIDLELOAD
@naserca@func_i
Paul LewisPaul IrishTHANKS
@naserca@func_i
RESPONDtap or click< 100ms
@naserca@func_i
ANIMATIONscroll or drag< 16ms (60fps)
@naserca@func_i
IDLEnada< 50ms
@naserca@func_i
LOADfirst meaningful paint< 1s
@naserca@func_i
bad
@naserca@func_i
device
@naserca@func_i
network speed
@naserca@func_i
90th percentile
@naserca@func_i
websiteswebsites
@naserca@func_i
Google: 2% slower = 2% less searching per userYahoo: 400 milliseconds faster = 9% more trafficAmazon: 100 milliseconds faster = 1% more revenue
@naserca@func_i
Rules?!Tools!
@naserca@func_i
1. html2. ?3. website
@naserca@func_i
1. html2. critical rendering path3. website
@naserca@func_i
1. DOM2. CSSOM3. render tree4. layout (reflow)5. paint
@naserca@func_i
1. DOMDocument Object Model
@naserca@func_i
<html>
<head>
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet">
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>
@naserca@func_i
2. CSSOMCSS Object Model
@naserca@func_i
body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }
@naserca@func_i
render blocking(by default)
@naserca@func_i
FOUC
@naserca@func_i
3. render tree
@naserca@func_i
4. layout (reflow)
@naserca@func_i
calculate exactposition and size
@naserca@func_i
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>Critical Path</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
@naserca@func_i
style changesfetching of layout/scrolladding/removing els
@naserca@func_i
5. paint
@naserca@func_i
paint *itself*“composite layers”
@naserca@func_i
<html>z-index’d & positionedopacity < 1overflow
@naserca@func_i
CPU & GPU
@naserca@func_i
void draw(SkCanvas* canvas) { canvas->drawColor(SK_ColorWHITE);
SkPaint paint; paint.setStyle(SkPaint::kFill_Style); paint.setAntiAlias(true); paint.setStrokeWidth(4); paint.setColor(0xffFE938C); SkRect rect = SkRect::MakeXYWH(10, 10, 100, 160); canvas->drawRect(rect, paint);
SkRRect oval; oval.setOval(rect); oval.offset(40, 80); paint.setColor(0xffE6B89C); canvas->drawRRect(oval, paint);
paint.setColor(0xff9CAFB7); canvas->drawCircle(180, 50, 25, paint);
rect.offset(80, 50); paint.setColor(0xff4281A4); paint.setStyle(SkPaint::kStroke_Style); canvas->drawRoundRect(rect, 10, 10, paint);}
@naserca@func_i
1. DOM2. CSSOM3. render tree4. layout (reflow)5. paint
@naserca@func_i
javascript
@naserca@func_i
synchronousDOM blocking
(by default)(scary)
@naserca@func_i
requires CSSOM
@[email protected]
But wait, there’s more!
@naserca@func_i
ANIMATIONscroll or drag< 16ms (60fps)
@naserca@func_i
60Hz
@naserca@func_i
1000/60 = 16.67ms per frame
@naserca@func_i
JavaScript Animations
@naserca@func_i
function draw() { // Drawing code goes here}setInterval(draw, 1000/60);
@naserca@func_i
∞
@naserca@func_i
YOLO
@naserca@func_i
juggling
@naserca@func_i
requestAnimationFrame🙌
@naserca@func_i
function draw() { requestAnimationFrame(draw); // Drawing code goes here}draw();
function draw() { // Drawing code goes here}setInterval(draw, 1000/60);
@[email protected]
Go get ‘em!