The Butterfly Effect How seemingly insignificant browser details have a huge impact on performance 

Jai Santhosh, Sr. Engineer @ Microsoft @jaisanth 

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 

Microsoft Search 

What we’ll look at now? • File Result Expand Animation - Rendering 

Dev Test App 

Prod Host App 

Prod Host App 

onClick Latency 

Fix Layout Thrashing 

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/ 

FLIP Technique 

With FLIP 

More painful points? 

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 

Conclusion • Read about perf optimization • Expect the unexpected! - Might spend time on unexpected obstacles • Test on all browsers 

Thanks! @jaisanth