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.

Transcript

1. The Butterfly Effect How seemingly insignificant browser details have a huge impact on performance
2. Jai Santhosh, Sr. Engineer @ Microsoft @jaisanth
3. 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
4. Microsoft Search
5. What we’ll look at now? • File Result Expand Animation - Rendering
6. Dev Test App
7. Prod Host App
8. Prod Host App
9. onClick Latency
10. Fix Layout Thrashing
11. 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/
12. FLIP Technique
13. With FLIP
14. More painful points?
15. 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
16. Conclusion • Read about perf optimization • Expect the unexpected! - Might spend time on unexpected obstacles • Test on all browsers
17. Thanks! @jaisanth