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
45
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
71
The Science of Font Selection
dangodev
2
480
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
650
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
BBQ
matthewcrist
89
9.9k
Navigating Team Friction
lara
190
15k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
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!