Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Browser Rendering & Performance

Avatar for Drew Powers Drew Powers
February 28, 2018
0
45

Browser Rendering & Performance

Lunch & Learn (28 Feb 2018)
https://www.youtube.com/watch?v=l03FMI5PjS0

Avatar for Drew Powers

Drew Powers

February 28, 2018
Tweet

More Decks by Drew Powers

See All by Drew Powers
Styling in React
Avatar for Drew Powers dangodev
0
33
Styling Systems in React
Avatar for Drew Powers dangodev
0
54
Virtual & Augmented Reality
Avatar for Drew Powers dangodev
0
100
Design of the Web (2017)
Avatar for Drew Powers dangodev
0
75
The Science of Font Selection
Avatar for Drew Powers dangodev
2
480

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
4.9k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
2.9k
Visualization
Avatar for Eitan Lees eitanlees
150
16k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
8
1.1k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k

Transcript

  1. BROWSER RENDERING AND PERFORM- ANCE BROWSER RENDERING AND PERFORM- ANCE

  2. None

  3. PREFACE:
 SHOUTS TO
 FIREFOX PREFACE: SHOUTS TO FIREFOX

  4. webpack.js.org

  5. 01. NETWORK
 TAB 01. NETWORK TAB

  6. dashboard.manifold.co Image Optimization

  7. 01. NETWORK TAB G O A L No cartoonishly large/slow

    requests, and images are reasonably-sized
  8. None

  9. 02. PERF TAB 02. PERF TAB

  10. dashboard.manifold.co* Addy Osmani: The Cost of JS * local dev

    Airbnb: React Performance Google: The RAIL model

  11. 02. PERF TAB G O A L Interactive in 2s,

    and each interaction takes 100ms

  12. 03.
 RENDER
 PANEL 03.
 RENDER PANEL

  13. Smashing Mag: Compositing 60FPS CSS Animations

  14. 03. RENDER PANEL G O A L Keep it at

    60FPS

  15. 04. ANIMATING 04.
 ANIMATING

  16. Material Design: Easing Nintendo Switch Loading

  17. 04. ANIMATING G O A L Find that sweet spot

    between “smooth” and “sluggish”

  18. 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

  19. TIME’S UP!