![Web Development Secrets Revealed - Critical Rendering Path, HTTP, AJAX, and More [Video]](https://static.packt-cdn.com/products/9781804618240/cover/smaller)
Web Development Secrets Revealed - Critical Rendering Path, HTTP, AJAX, and More [Video]
- FREE Subscription Read for free
- $54.99 Video Buy
- $12.99 Video + Subscription Buy
-
What do you get with a Packt Subscription?
- Instant access to this title and 7,500+ eBooks & Videos
- Constantly updated with 100+ new titles each month
- Breadth and depth in over 1,000+ technologies
-
Free Chapter
Introduction
- Course Overview
- Introduction
- What This Course Covers
- How Browsers Used to Make Data Requests
- AJAX - Introduction
- Quick Step Back
- XMLHttpRequest - Introduction
- Building the XMLHttpRequest Object
- Dealing with the Response Data
- Another Example - Displaying Time from a Server
- Building Our Custom Time Function
- Another Example - Fetching an Image and Person's Name
- Defining Our requestListener Function
- XMLHttpRequest - Summary of Our Picture and Name Example
- Fetch - Introduction
- Fetch - Setting It Up
- Fetch - What Is the .json() Method
- Fetch - with POST
- Replacing XMLHttpRequest with Fetch for Our Picture and Name Example
- Conclusion
-
HTTP Protocol, TCP, and Packets
-
Advanced - Building a Custom Polyfill
- Polyfill Introduction
- What Is a Browser
- Do Browsers Follow a Set of Standards
- What Is a Polyfill?
- Testing Whether the forEach() Method Exists in Our Browser
- What Is forEach()?
- Practical Example of forEach()
- Custom forEach() Polyfill - Introduction
- Custom forEach() Polyfill - First Step
- Custom forEach() Polyfill - Callback Function
- What Is THIS?
- Custom forEach() Polyfill - Final
- Section Summary
-
Critical Rendering Path - DOM, CSSOM, Render Tree
- Introduction
- JS Engine, Rendering Engine, and the Glue that Holds It All Together (Browser)
- How the Browser Works (the Steps It Takes to Fetch Data and Display It)
- Critical Rendering Path - Introduction
- Constructing the DOM - Part 1
- Constructing the DOM - Part 2
- Quick Recap
- Performance Tab - DevTools
- Call Tree - an Alternative Way to Analyze Your Website's Activities
- Bottom-Up and Event Log - an Alternative Way to Analyze Your Website's Activities
- CSSOM - Introduction
- Why Do We Need to Have a CSS Tree?
- How to View the CSSOM Process for Your Website - Recalculate Style
- Render Tree - Introduction
- Render Tree - Challenge
- Render Tree - Solution
- Quick Recap - Render Tree
- Comparing DOM, CSSOM, and Render Tree
- Render Tree - Layout
- Viewing the Layout Process in DevTools
- Render Tree - Paint
- Step Back
-
Render Blocking Resources
- Render Blocking Resources - Introduction
- How to Make CSS Non-Render Blocking (Hint: Media Queries)
- Media Types - Example
- Is JavaScript Render Blocking?
- JavaScript and the DOM
- The Order of Your Code Matters - Part 1
- The Order of Your Code Matters - Part 2 (Solution)
- JavaScript and the CSSOM
- Example of JavaScript Having to Wait for the CSS
- Step Back: DOM Versus CSSOM Versus JavaScript
- JavaScript Is Render Blocking
- Approach 1: Placing JavaScript at the Bottom of Your Page
- Approach 2: Using Async
- Comparing Approach 1 (Bottom) Versus Approach 2 (Async)
- Approach 3: Defer
- Comparing Approach 2 (Async) Versus Approach 3 (Defer)
- Approach 4: Custom Event Listener - Part 1
- Approach 4: Custom Event Listener - Part 2 (Let's Analyze the Entire Render)
- Async Versus Defer Versus Custom
- Approach 5: Preload
- Summary of Where We Can Place Our JS to Improve the CRP
- Introduction to Speculative Parsing
- What Is Speculative Parsing?
-
Having Fun: Lets Analyze the Critical Rendering Path Together
- Section Introduction
- Why Is the Network Panel Important
- Introduction to Network Panel
- What Do All the Columns Mean in the Network Panel
- Response and Request Headers
- Timing Tab and Waterfall Stack
- Three Most Common Network Requests You Will See
- Time Phases - Introduction
- Time Phases - Detailed Explanation
- CDN - An Introduction
- Analyzing File Requests in the Network Panel
- Network Panel – High-Level Overview
- Analyzing Our File's CRP - No CSS and No JS
- What Is the Size Column?
- How to Identify the Number of Critical Resources and Server Round Trips
- Let's Add JavaScript and CSS
- Rendering Our New File with JavaScript and CSS
- Impact that JavaScript and CSS Have on Our CRP
- Inline JavaScript
- Adding ASYNC to Our File, and Its Impact on the CRP
- Steps to Take to Optimize the Critical Rendering Path
- Audit Lighthouse - Introduction
- Audit Lighthouse - Example
-
What Is HTTP/2?
About this video
In this course, you will learn about the Critical Rendering Path. This refers to the set of steps browsers must take to fetch and then convert HTML, CSS, and JavaScript into living, breathing websites. From there, you will start exploring and experimenting with tools to measure performance. You will learn simple, yet very powerful strategies to deliver the first pixels to the screen as early as possible.
Knowledge of the CRP is incredibly useful for understanding how a site’s performance can be improved. There are various stages to the CRP, such as constructing the DOM, constructing the CSSOM, running JavaScript, creating the Render Tree, generating the layout, and finally painting pixels to the screen. As you can see, this covers a whole bunch of interesting material.
We will dig deeper in every lecture, by learning about things such as HTTP, TCP, data packets, render-blocking resources, and a whole bunch more! This course has many bonus lectures that will extend your knowledge base and test your skills.
Through practical examples, this course helps you understand the CRP piece by piece. We will use the latest and best features of JavaScript and browsers (such as the new Fetch API) along the way so you can stay ahead of the pack.
By the end of this course, you will be able to “speak” CRP by gaining an understanding of how to fetch data from a server and then get that data to your user as quickly as possible.
All the resources for this course are available at https://github.com/PacktPublishing/Web-Development-Secrets-Revealed---Critical-Rendering-Path-HTTP-AJAX-and-More
- Publication date:
- May 2022
- Publisher
- Packt
- Duration
- 8 hours 15 minutes
- ISBN
- 9781804618240
Download code from GitHub