Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Browser Rendering & Performance
Search
Drew Powers
February 28, 2018
0
44
Browser Rendering & Performance
Lunch & Learn (28 Feb 2018)
https://www.youtube.com/watch?v=l03FMI5PjS0
Drew Powers
February 28, 2018
Tweet
Share
More Decks by Drew Powers
See All by Drew Powers
Styling in React
dangodev
0
30
Styling Systems in React
dangodev
0
53
Virtual & Augmented Reality
dangodev
0
99
Design of the Web (2017)
dangodev
0
69
The Science of Font Selection
dangodev
2
470
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Code Review Best Practice
trishagee
70
19k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Adaptive Systems
keathley
43
2.7k
Bash Introduction
62gerente
614
210k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Building an army of robots
kneath
306
46k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Code Reviewing Like a Champion
maltzj
525
40k
Transcript
BROWSER RENDERING AND PERFORM- ANCE BROWSER RENDERING AND PERFORM- ANCE
None
PREFACE: SHOUTS TO FIREFOX PREFACE: SHOUTS TO FIREFOX
webpack.js.org
01. NETWORK TAB 01. NETWORK TAB
dashboard.manifold.co Image Optimization
01. NETWORK TAB G O A L No cartoonishly large/slow
requests, and images are reasonably-sized
None
02. PERF TAB 02. PERF TAB
dashboard.manifold.co* Addy Osmani: The Cost of JS * local dev
Airbnb: React Performance Google: The RAIL model
02. PERF TAB G O A L Interactive in 2s,
and each interaction takes 100ms
03. RENDER PANEL 03. RENDER PANEL
Smashing Mag: Compositing 60FPS CSS Animations
03. RENDER PANEL G O A L Keep it at
60FPS
04. ANIMATING 04. ANIMATING
Material Design: Easing Nintendo Switch Loading
04. ANIMATING G O A L Find that sweet spot
between “smooth” and “sluggish”
NETWORK Identify large/slow requests PERF Interactive up front, interactive all
the way through RENDERING Keeping it at 60FPS ANIMATING The user experiences everything; make it look good G O A L S
TIME’S UP!