Own Your Front-end Performance: Tools, Not Rules
-
Upload
functional-imperative -
Category
Technology
-
view
95 -
download
1
Transcript of Own Your Front-end Performance: Tools, Not Rules
![Page 1: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/1.jpg)
@naserca @func_i
Own Your Front-end Performance Tools, Not Rules
Alex Naser @naserca Laith Azer @func_i
devhub - devmonth April 14, 2016
![Page 2: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/2.jpg)
@naserca @func_i
“Don’t Be Slow”
![Page 3: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/3.jpg)
@naserca @func_i
![Page 4: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/4.jpg)
@naserca @func_i
fast as possible response times measure via benchmark
![Page 5: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/5.jpg)
@naserca @func_i
Rules!
![Page 6: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/6.jpg)
@naserca @func_i
Hash#mergevs
Hash#merge!
![Page 7: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/7.jpg)
@naserca @func_i
Hash#mergevs
Hash#merge!
24x slower
![Page 8: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/8.jpg)
@naserca @func_i
Array#unshiftvs
Array#insert
![Page 9: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/9.jpg)
@naserca @func_i
Array#unshiftvs
Array#insert
262x slower
![Page 10: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/10.jpg)
@naserca @func_i
Easy!
![Page 11: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/11.jpg)
@naserca @func_i
“Don’t Be Slow”
![Page 12: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/12.jpg)
@naserca @func_i
![Page 13: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/13.jpg)
@naserca @func_i
fast load, smooth animations measure
![Page 14: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/14.jpg)
@naserca @func_i
fast load, smooth animations measure
how fast?
at what speed?
on what device(s)?
how fast?when?
images?
text?
how?
![Page 15: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/15.jpg)
@naserca @func_i
Rules?!
![Page 16: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/16.jpg)
@naserca @func_i
CSS animations vs
JS animations
![Page 17: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/17.jpg)
@naserca @func_i
well…
![Page 18: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/18.jpg)
@naserca @func_i
concat’d CSS files vs
separate CSS files
![Page 19: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/19.jpg)
@naserca @func_i
well…
![Page 20: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/20.jpg)
@naserca @func_i
Hard!
![Page 21: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/21.jpg)
@naserca @func_i
“Don’t Be Slow”
![Page 22: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/22.jpg)
@naserca @func_i
“Don’t Be Slow” “Don’t Feel Slow”
![Page 23: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/23.jpg)
@naserca @func_i
Title slide
Subtitle Day Month, Year
users
![Page 24: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/24.jpg)
@naserca @func_i
Title slide
Subtitle Day Month, Year
What are they doing?
![Page 25: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/25.jpg)
@naserca @func_i
waiting for page to load tap nav icon watch animation of nav bar looking for link
![Page 26: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/26.jpg)
@naserca @func_i
waiting for page to load
LOAD
![Page 27: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/27.jpg)
@naserca @func_i
tap nav icon
RESPOND
![Page 28: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/28.jpg)
@naserca @func_i
watch animation of nav bar
ANIMATION
![Page 29: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/29.jpg)
@naserca @func_i
looking for link
IDLE
![Page 30: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/30.jpg)
@naserca @func_i
RESPOND ANIMATION IDLE LOAD
![Page 31: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/31.jpg)
@naserca @func_i
Paul Lewis Paul IrishTHANKS
![Page 32: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/32.jpg)
@naserca @func_i
RESPOND tap or click < 100ms
![Page 33: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/33.jpg)
@naserca @func_i
ANIMATION scroll or drag < 16ms (60fps)
![Page 34: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/34.jpg)
@naserca @func_i
IDLE nada < 50ms
![Page 35: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/35.jpg)
@naserca @func_i
LOAD first meaningful paint < 1s
![Page 36: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/36.jpg)
@naserca @func_i
bad
![Page 37: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/37.jpg)
@naserca @func_i
device
![Page 38: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/38.jpg)
@naserca @func_i
network speed
![Page 39: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/39.jpg)
@naserca @func_i
90th percentile
![Page 40: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/40.jpg)
@naserca @func_i
websiteswebsites
![Page 41: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/41.jpg)
@naserca @func_i
Google: 2% slower = 2% less searching per user Yahoo: 400 milliseconds faster = 9% more traffic Amazon: 100 milliseconds faster = 1% more revenue
![Page 42: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/42.jpg)
@naserca @func_i
Rules?! Tools!
![Page 43: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/43.jpg)
@naserca @func_i
1. html 2. ? 3. website
![Page 44: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/44.jpg)
@naserca @func_i
1. html 2. critical rendering path 3. website
![Page 45: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/45.jpg)
@naserca @func_i
1. DOM 2. CSSOM 3. render tree 4. layout (reflow) 5. paint
![Page 46: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/46.jpg)
@naserca @func_i
1. DOM Document Object Model
![Page 47: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/47.jpg)
@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>
![Page 48: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/48.jpg)
@naserca @func_i
![Page 49: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/49.jpg)
@naserca @func_i
2. CSSOM CSS Object Model
![Page 50: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/50.jpg)
@naserca @func_i
body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }
![Page 51: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/51.jpg)
@naserca @func_i
![Page 52: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/52.jpg)
@naserca @func_i
render blocking (by default)
![Page 53: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/53.jpg)
@naserca @func_i
FOUC
![Page 54: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/54.jpg)
@naserca @func_i
3. render tree
![Page 55: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/55.jpg)
@naserca @func_i
![Page 56: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/56.jpg)
@naserca @func_i
4. layout (reflow)
![Page 57: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/57.jpg)
@naserca @func_i
calculate exact position and size
![Page 58: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/58.jpg)
@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>
![Page 59: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/59.jpg)
@naserca @func_i
![Page 60: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/60.jpg)
@naserca @func_i
style changes fetching of layout/scroll adding/removing els
![Page 61: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/61.jpg)
@naserca @func_i
5. paint
![Page 62: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/62.jpg)
@naserca @func_i
paint *itself* “composite layers”
![Page 63: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/63.jpg)
@naserca @func_i
<html>z-index’d & positioned opacity < 1 overflow
![Page 64: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/64.jpg)
@naserca @func_i
CPU & GPU
![Page 65: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/65.jpg)
@naserca @func_i
![Page 66: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/66.jpg)
@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);}
![Page 67: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/67.jpg)
@naserca @func_i
1. DOM 2. CSSOM 3. render tree 4. layout (reflow) 5. paint
![Page 68: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/68.jpg)
@naserca @func_i
javascript
![Page 69: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/69.jpg)
@naserca @func_i
synchronous DOM blocking
(by default) (scary)
![Page 70: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/70.jpg)
@naserca @func_i
requires CSSOM
![Page 71: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/71.jpg)
@func_i @naserca functionalimperative.com
But wait, there’s more!
![Page 72: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/72.jpg)
@naserca @func_i
ANIMATION scroll or drag < 16ms (60fps)
![Page 73: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/73.jpg)
@naserca @func_i
60Hz
![Page 74: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/74.jpg)
@naserca @func_i
1000/60 = 16.67ms per frame
![Page 75: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/75.jpg)
@naserca @func_i
JavaScript Animations
![Page 76: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/76.jpg)
@naserca @func_i
function draw() { // Drawing code goes here}setInterval(draw, 1000/60);
![Page 77: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/77.jpg)
@naserca @func_i
∞
![Page 78: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/78.jpg)
@naserca @func_i
YOLO
![Page 79: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/79.jpg)
@naserca @func_i
juggling
![Page 80: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/80.jpg)
@naserca @func_i
requestAnimationFrame🙌
![Page 81: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/81.jpg)
@naserca @func_i
function draw() { requestAnimationFrame(draw); // Drawing code goes here}draw();
function draw() { // Drawing code goes here}setInterval(draw, 1000/60);
![Page 82: Own Your Front-end Performance: Tools, Not Rules](https://reader034.fdocuments.net/reader034/viewer/2022042907/5888cf511a28aba1058b4645/html5/thumbnails/82.jpg)
@func_i @naserca functionalimperative.com
Go get ‘em!