Book Image

Web Development Secrets Revealed - Critical Rendering Path, HTTP, AJAX, and More [Video]

By : SkillZone .
Book Image

Web Development Secrets Revealed - Critical Rendering Path, HTTP, AJAX, and More [Video]

By: SkillZone .

Overview of this book

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

Related Content you might be interested in

Current Title:

Small book image
Web Development Secrets Revealed - Critical Rendering Path, HTTP, AJAX, and More [Video]
SkillZone .
May, 2022 | 8 hours 15 minutes
No titles found
Table of Contents (7 chapters)
Free Chapter
1
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
2
HTTP Protocol, TCP, and Packets
The Browser's Main Functionality
Browsers and W3C
Browsers Request - Introduction
Packets
Packets - Five Layers Explained
Packets - Example
HTTP Protocol - Introduction
HTTP - Request and Response
Take a Step Back - This Stuff Is Practical
Section Summary
3
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
4
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
5
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?
6
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
7
What Is HTTP/2?
Section introduction
HTTP/1.1 - Recap
HTTP/2 - Where Did It Come From?
HTTP/2 - What Is It?
HTTP/2 Questions and Answers
Chapter 5
Render Blocking Resources
Content Locked
Section 20
Approach 5: Preload
Loading assets (things such as CSS, jpegs, js files) on a page is one of the most important parts to get right in order to achieve a fast first meaningful paint. Usually, real-world apps load multiple assets, and we have seen in the previous lectures that these assets are render-blocking by default, which negatively impacts the loading performance. How do we solve this? One way is using preload. Preload lets you declare fetch requests in the HTML's <head>, specifying the assets that your page will need very soon and which you want to start loading early in the lifecycle. Let's see how it works.
Previous Section
End of Section 20
Next Section