Scrolling performance, Angular 2 Optimizations @ Toronto Web Performance Group Meetup

We met at Shopify‘s office.

David Bokan from the Google Chrome team in Waterloo talked about scrolling performance in Google Chrome

CSS property will-change:transform can force an element to be composited by the GPU before a CSS animation uses it. will-change on caniuse, will-change on MDN
Chrome 51 has Passive Event Listeners that run asynchronously, so your slow functions that run on touch & mousewheel events don’t interfere with the browser’s attempts to smoothly scroll the page Passive Event Listeners on caniuse, on MDN, on Chrome blog
try requestIdleCallback callbacks for number crunching & processing stuff while the browser isn’t busy rendering. requestIdleCallback on caniuse, on MDN, on Chrome blog
Don’t poll with setInterval or setTimeout when you can listen for events. You’ll be surprised what you can listen for in new browsers Intersection Observer, ResizeObserver, Performance Observer
Look for ‘the fast path’ in the browser, keep main thread as idle as possible

There are nice charts in his slides showing the effects of AoT compilation, different chunk loading strategies, and more