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

The Butterfly Effect - How seemingly insinificant browser details have a huge impact upon performance

The Butterfly Effect - How seemingly insinificant browser details have a huge impact upon performance

This presentation highlights how small details in the browser can cause big impacts in web browser performance using a small example.

Jai Santhosh

May 11, 2019
Tweet

More Decks by Jai Santhosh

Other Decks in Technology

Transcript

  1. What I do? Microsoft Search • Cohesive search experience in

    Native UI across 6 platforms • Multiple Host Apps What we’ll talk about? • Web Performance • Consistency across browsers
  2. FLIP Technique FLIP stands for First, Last, Invert, Play •

    First: The initial state of the element(s) involved in the transition. You can use element.getBoundingClientRect() for this • Last: The final state of the element(s). • Invert: Since the element is in the last position, we want to create the illusion that its in the first position, by using transform to modify its position and dimensions. • Play: With the element inverted (and pretending to be in the first position), we can move it back to its last position by setting its transform to none. https://aerotwist.com/blog/flip-your-animations/
  3. Browser Inconsistencies • Layout caching • Interfering animations • Opacity

    + Animations • Anti-aliasing • Animation synchronization • Keyframes + Timing function • Animated GIFs •window.requestAnimationFrame() • CSS injection • Stylesheet API bugs • Rendering Pipeline • ScreenReader • Focus decoration • Fonts • Performance • Dev Tools • Microtasks
  4. Conclusion • Read about perf optimization • Expect the unexpected!

    - Might spend time on unexpected obstacles • Test on all browsers