JSFoo 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

• JavaScript/Style -> Layout -> Paint -> Composite
• 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

• Understanding your JavaScript Execution
• Leveraging Idle times using requestIdleCallback
• 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.

Outline

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.

Speaker bio

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!

Links

• https://twitter.com/jaisanth
• http://jaisanth.com/