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
43

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
26
Styling Systems in React
Avatar for Drew Powers dangodev
0
52
Virtual & Augmented Reality
Avatar for Drew Powers dangodev
0
96
Design of the Web (2017)
Avatar for Drew Powers dangodev
0
66
The Science of Font Selection
Avatar for Drew Powers dangodev
2
450

Featured

See All Featured
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
46
14k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
299
21k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
700
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
55
5.6k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
It's Worth the Effort
Avatar for 3n 3n
184
28k

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!