Course Features
Duration
1 month
Delivery Method
Online
Available on
Limited Access
Accessibility
Desktop, Laptop
Language
English
Subtitles
English
Level
Advanced
Teaching Type
Self Paced
Course Description
Course Overview
International Faculty
Post Course Interactions
Hands-On Training,Instructor-Moderated Discussions
Skills You Will Gain
Prerequisites/Requirements
(Recommended) Background knowledge about the critical rendering path from Website Performance Optimization will be helpful
You're a web developer who has written apps using HTML, CSS and JavaScript", 'You have used Chrome DevTools
What You Will Learn
App LifecyclesHow to recognize the four distinct phases in an app's lifecycle: Response, Animation, Idle and Load (RAIL)How your frame budget changes depending on where the user is in RAILPractice thinking through app workloads at different stages in RAI
Compositing and PaintingPractice profiling layer and paint performance with the paint profiler tool in the DevTools TimelineLearn how to optimize layers to reduce the number of steps the browser needs to take to render each frameDemonstrate everything yo
JavaScriptHow to optimize JavaScript to hit fps during animationsHow to move expensive JavaScript operations off the main thread and into Web WorkersHow to debug a janky copy of a production quality app - the QR Snapper
Styles and LayoutLearn how accessing the wrong CSS properties can create loads of extra work for the browserLearn how to debug multiple instances of Forced Synchronous Layout
Weapons of Jank DestructionHow to make sense of the Timeline panel in Chrome DevToolsPractice profiling a few different apps to find the source of jank
The Critical Rendering PathIntroduction to the course with Paul LewisLearn how the browser turns HTML into pixels on the pageSee how different CSS styles affect the rendering pipeline differently