Know your Application Rendering 'Inside Out'
Submitted by Jai Santhosh (@jaisanth) on Tuesday, 23 August 2016
We have heard a lot about what are the best practices of how to make your Web application render at 60fps, but before we start applying them, it is vital to understand the exact Status Quo in the existing state contextually.
We need to know What and the how to measure various rendering performance parameters and how to ensure it does not degrade over time.
The following will be the focus of this talk:
Understanding the Rendering Lifecycle
- Measuring the above with Timeline in Chrome DevTools
Frames & Frame Rates
- Understanding Janks
- Is Layout Thrashing happening?
Diving deeper into Long frames in your Timeline
- Leveraging Idle times using
- What can be offloaded to a worker thread?
Examining your Layers and Layer Explosions
- Understanding the Layers during Rendering
- Overview of GPU Rasterization
We believe this will enable you to achieve the best user experience for your application and help you with the best approach to build a performant web application.
This talk will focus on the What and the How to measure your Web Application Rendering performance and the right tools needed for your armoury.
Currently, Lead Engineer at ClearTax. Previously, worked with Flipkart and Yahoo! for more than 8 years, led the teams that built Flipkart Lite and the new Flipkart Desktop website.
Having worked in teams at large-scale like Yahoo! Maps and Media sites, Flipkart Web to Finance Tech applications at ClearTax, would love to share my experience and learnings to make the Web an even better place. Hail the Web!