Browser Rendering Optimization

Project

*The News Aggregator App* - Turn an unusable app into a high performance, 60 frame per second experience. You'll be given a news aggregator app that uses the to display the day's top stories. The news aggregator has *lots* of performance issues. You'll demonstrate your understanding of performance by destroying all the jank and creating an experience that users will love.

Lesson 1 - The Critical Rendering Path

* You'll play Jank Invaders to develop your eye for jank!* You'll learn how the browser turns HTML into pixels on the page* You'll learn how different CSS styles affect the rendering pipeline differently.

Lesson 2 - App Lifecycles

* You'll learn how there are four distinct phases in an app's lifecycle: Response, Animation, Idle and Load (RAIL).* You'll learn how your frame budget changes depending on where the user is in RAIL.* You'll practice thinking through app workloads at different stages in RAIL.

Lesson 3 - Weapons of Jank Destruction

* You'll learn how to make sense of the Timeline panel in Chrome DevTools.* You'll practice profiling a few different apps to find the source of jank.

Lesson 4 - JavaScript

* You'll optimize JavaScript to hit 60fps during animations.* You'll move expensive JavaScript operations off the main thread and into Web Workers.* You'll debug a janky copy of a production quality app - .

Lesson 5 - Styles and Layout

* You'll learn how accessing the wrong CSS properties at inopportune moments can create loads of extra work for the browser.* You'll debug multiple instances of one of the nastiest performance problems - Forced Synchronous Layout.

Lesson 6 - Compositing and Painting

* You'll practice profiling layer and paint performance with the paint profiler tool in the DevTools Timeline.* You'll manage and optimize layers to reduce the number of steps the browser needs to take to render each frame.* You'll demonstrate everything you've learned about performance as you de-jankify the News Aggregator App!