- Introduction to the course with Paul Lewis.
- See how different CSS styles affect the rendering pipeline differently
- Learn how the browser turns HTML into pixels on the page
Expert
Online
1 Month
Free
Quick facts
particular | details | |
---|---|---|
Medium of instructions
English
|
Mode of learning
Self study
|
Mode of Delivery
Video and Text Based
|
Course overview
Browser Rendering Optimization course will teach course participants how to destroy jank and formulate web apps that maintain 60 FPS performance. As the payload of web applications increases, developers are supposed to additionally ensure that best practices are adopted so that data is delivered smoothly if users are provided with an overall exemplary experience.
The Browser Rendering Optimization by Udacity. Taught by Paul Lewis and Cameron Pittman, the online course takes the candidates through the widely adopted and best practices in web development today include debugging multiple instances of Forced Synchronous Layout, reducing the number of steps the browser takes to render each frame and optimising JavaScript to hit 60fps.
Post-completion of Browser rendering optimization online course, learners will be well-versed with all the tools needed to create profile apps and identify what causes jank. They will get to explore the browser's rendering pipeline and discover patterns that make building performant apps easy and convenient.
The highlights
- Rich learning materials
- Interactive exercises
- Self-paced learning for one month
- Industry professionals-led course
- Free training
- Supported by Google Inc.
Approx. 1 Month duration
Program offerings
- Online learning
- Videos
- Quiz
Course and certificate fees
Type of course
The Browser Rendering Optimization fee details is as follows:
Fee | Amount in Rs. |
Course Fee | Free |
certificate availability
Eligibility criteria
Work experience
Course participants of the Browser Rendering Optimization online course must have professional work experience as a web developer in writing apps using HTML, JavaScript and CSS. They must also have experience in using Chrome DevTools.
Education
The candidates who wish to take the Browser Rendering Optimization course by Udacity training is recommended to be accustomed to background knowledge of critical rendering path from the Website Performance Optimization course by Udacity.
What you will learn
After completing the Browser Rendering Optimization syllabus:
- Candidates will recognize and understand the four essential distinct phases in the lifecycle of an app namely, response, animation, idle and load (RAIL).
- While learning in this programme, they will also get an understanding of the profiling layer and paint performance. They will practice these techniques with the help of a paint profiler tool available in the DevTools timeline.
- Learners shall get an idea of optimizing layers by reducing the steps undertaken by the browser to render each frame.
- They shall know how changes in framing the budget will depend on where the user is in RAIL.
- They will get a practical understanding of app workloads at different stages in RAIL.
- They shall learn to demonstrate their learnings on performance by de-jankifying the news aggregator app.
- They shall get practical exposure to debugging multiple instances of the forced synchronous layout.
- Finally, learners shall also be well aware of the repercussions of accessing the wrong CSS properties that can create extra workload for the browser.
Admission details
Candidates can register themselves for Browser Rendering Optimization Certification online course for free by going through the following procedure-
Step 1: The candidates are required to visit the official URL of the programme- https://www.udacity.com/course/browser-rendering-optimization--ud860 and select “Sign up for free”
Step 2: Log in with your existing account or sign up if you are a new user through your Google or Facebook or account.
Step 3: After successfully enrolling in the programme, candidates will be able to pursue the course immediately.
The syllabus
Lesson 1
The critical rendering path
Lesson 2
App lifecycles
- How your frame budget changes depending on where the user is in RAIL.
- How to recognize the four distinct phases in an app's lifecycle: Response, Animation, Idle and Load (RAIL).
- Practice thinking through app workloads at different stages in RAIL.
Lesson 3
Weapons of jank destruction
- Practice profiling a few different apps to find the source of jank
- How to make sense of the Timeline panel in Chrome DevTools.
Lesson 4
JavaScript
- How to optimize JavaScript to hit 60fps during animations.
- How to debug a janky copy of a production-quality app - the QR Snapper.
- How to move expensive JavaScript operations off the main thread and into Web Workers.
Lesson 5
Styles and layout
- Learn how to debug multiple instances of Forced Synchronous Layout.
- Learn how accessing the wrong CSS properties can create loads of extra work for the browser.
Lesson 6
Compositing and painting
- Learn how to optimize layers to reduce the number of steps the browser needs to take to render each frame.
- Practice the profiling layer and paint performance with the paint profiler tool in the DevTools Timeline.
- Demonstrate everything you've learned about performance as you de-jank the News Aggregator App!
Scholarship Details
Browser Rendering Optimization training is not having any scholarship option since it is a free learning programme.
How it helps
Demystifying the browser's rendering pipeline will streamline its performance and make it easy for developers to build high-performance web apps devoid of technical lags. Implementing this through a few simple principles is included in the Browser Rendering Optimization benefits. The course makes course participants capable of reducing the browser's workload and the time needed to render each frame, drastically.
The Browser Rendering Optimization Course introduces learners to the individual steps of the rendering pipeline. They will learn to implement this practically by beginning with parsing HTML and concluding with painting pixels on the screen. It will then proceed with tooling with ample opportunities to practice debugging apps with Chrome Developer Tools and profiling, which will be of ample use to learners at their workplace.
The final project in this course uses the Hacker News API and exposes course participants to exhibit everything they have learned to create a high-performance web app. Since the course has been specifically drafted for advanced learning, the lessons provide in-depth knowledge of advanced skills. Candidates are taught by industry experts so they get to understand the practicalities.
Instructors
Mr Cameron Pittman
Instructor
Freelancer
FAQs
There is no such system at present since this is a free course.
No, since this course has specific educational eligibility criteria and is an advanced-level learning programme.
This programme shall be delivered by Cameron Pittman and Paul Lewis.
There is a final project that the learners will have to undertake at the end of the Browser rendering optimization online course.
The progress of each candidate can be tracked on their respective course dashboard.
The deadline if any, will be displayed on the course dashboard.
The project will be reviewed by Udacity experts who are from different backgrounds.
Yes, this can be done within 10 minutes and before a reviewer is assigned to it. To cancel a project submission:
- Navigate to the project page on the classroom dashboard.
- Click "Cancel Submission" in the upper right-hand corner
- Click "Yes Delete My Submission" to cancel the submission.
Project reviews are generally completed within 2-4 days from the time of submission. However, in case of a greater number of submissions and if there is a requirement to give individual feedback, the time may extend to one week.
Articles
Popular Articles
Latest Articles
Similar Courses
Flask Web Development
CodingNomads
Learn Django Online
CodingNomads
Courses of your interest
Computer Vision for Embedded Systems
Purdue University, West Lafayette via Edx
Quantum Computer Systems Design I Intro to Quantum...
UChicago via Edx
Fundamentals of Quantum Information
Delft University of Technology via Edx
Quantum Computer Systems Design II Principles of Q...
UChicago via Edx
Quantum Computer Systems Design III Working with N...
UChicago via Edx
HTML5 Apps and Games
World Wide Web Consortium via Edx
Problem Solving & System Design Advanced
Scaler Academy
Data Science and Machine Learning Program - Advanc...
Scaler Academy
Trees and Graphs Basics
CU Boulder via Coursera
More Courses by Google
Advanced Power Searching With Google
Google via Edx
Production Machine Learning Systems
Google via Coursera
Machine Learning in the Enterprise
Google via Coursera
Preparing for the Google Cloud Professional Data E...
Google via Coursera
End-to-End Machine Learning with TensorFlow on GCP
Google via Coursera
Reliable Google Cloud Infrastructure Design and Pr...
Google via Coursera
Gradle for Android and Java
Google via Udacity
Front End Frameworks
Google via Udacity
Client-Server Communication
Google via Udacity
Developing Scalable Applications in Python
Google via Udacity