Skip to main content

GPU and Web UI Performance: Building an Endless 60fps Scroller

Diego Ferreiro (Salesforce)
Performance
Mission City Ballroom B1
Average rating: ****.
(4.65, 20 ratings)
Slides:   external link

Creating complex UI components such as a circular carousel with thousands of DOM elements inside, or an infinite scroller with dynamic fetching of data, has always been a challenge on the web. You have to do mathematical calculations, trigger beautiful transitions, and manipulate the DOM (with its costly paints and reflows) in an orchestrated and performant fashion.

We’ll dive into a practical example, showing how an endless 60fps scroller was built and optimized to fully leverage all the power of the GPU. We’ll cover the math and animation functions behind it, the techniques used for improving the performance of browser repaints and reflows, and showcase the latest tools for diagnosing bottlenecks and jank in the browser rendering engine.

Photo of Diego Ferreiro

Diego Ferreiro

Salesforce

Diego Ferreiro is a Lead Front end and Web UI performance engineer at Salesforce. He was previously at Yahoo!, working in the Search Platform Team migrating the architecture to use NodeJS and Mojito.

Diego spend his days worrying about web performance, 60fps animations, and making the UI faster.