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

1. Course Overview

Let's take a quick sneak peek into the course.

2. Introduction

Always learn the basics before jumping into the deep end.

3. What This Course Covers

This course is all about optimizing the Critical Rendering Path. This will involve discussion about things such as requests, responses, AJAX, rendering engines, network layers, and so on.

4. How Browsers Used to Make Data Requests

Talking about the old-school way can be a little boring. But trust me, you need to understand this in order to understand how browsers interact with servers today. Enjoy!

5. AJAX - Introduction

AJAX is awesome. It allows webpages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it's now possible to update parts of a webpage, without reloading the whole page. Cool, hey!

6. Quick Step Back

Sometimes you can't see the wood for the trees. So, in this video, let's take a step back and remind ourselves why we are looking at AJAX and what it all means in the bigger picture.

7. XMLHttpRequest - Introduction

We use AJAX, or in other words, the XMLHttpRequest (XHR) object, to interact with servers. Using AJAX allows us to get data from a URL without having to do a full-page refresh. This lecture explains how we set up the XMLHttpRequest object in three simple steps. Let's jump right into it!

8. Building the XMLHttpRequest Object

XMLHttpRequest can be used to fetch data in a number of formats including XML, HTML, JSON, or plain text. In our example, we are going to fetch data from a server. When we receive the data from the server, we are going to display ALL DONE to the webpage.

9. Dealing with the Response Data

Up until now, we haven't dealt with the actual response data. We have made a request to a server, received a response, but then left it there. Now, it's time to jump in and deal with the data that has been received from the server.

10. Another Example - Displaying Time from a Server

This is another example of fetching data (in this case, the time) from a server and then displaying that to the window.

11. Building Our Custom Time Function

This is the second part of building our AJAX time function.

12. Another Example - Fetching an Image and Person's Name

The more AJAX examples we do together, the better programmer you will become. So, let's make another AJAX call to a server using the XMLHttpRequest object.

13. Defining Our requestListener Function

When we receive the data from the server, we have executed a function to deal with the data. But we have not yet built the function. This is what we are going to do now.

14. XMLHttpRequest - Summary of Our Picture and Name Example

A quick summary of what we have just done.

15. Fetch - Introduction

The Fetch API allows us to use JavaScript to access and manipulate parts of the HTTP pipeline, such as requests and responses. It also provides us with a fetch() method that gives us an easy way to fetch resources asynchronously across the network.

16. Fetch - Setting It Up

The Fetch() API takes one mandatory argument and a further optional argument. It also returns a Promise. But what does this all mean?

17. Fetch - What Is the .json() Method

We have seen that the fetch() request returns a Response object. What you may not know is that the body of this Response object is a Stream object, which means that we need a method to return it to us. When we call the json() method, a Promise is returned as the reading of the stream will happen asynchronously.

18. Fetch - with POST

We have seen how a GET request works. But for the sake of completeness, let's now look at a POST request. Remember, it's not scary. A POST request method requests that a web server accept the data enclosed in the body of the request message. Mostly, your intention is for the server to store this information. A POST request is often used when uploading a file or when submitting a completed web form.

19. Replacing XMLHttpRequest with Fetch for Our Picture and Name Example

According to Google Developers Documentation, Fetch makes it easier to make asynchronous requests and handle responses better than with the old school XMLHttpRequest object. Remember how we built a webpage using XMLHttpRequest. Now, let's build the same thing but using Fetch. You will see first-hand how much more intuitive the Fetch API is.

20. Conclusion

Whew! Well done for completing section 1. Let's take a quick look at what you have learnt.

1. The Browser's Main Functionality

Your browser is nothing more than software that is used to access the Internet. Your browser lets you visit websites and do activities within them, such as log in to your accounts, view videos, visit one page from another, and print, send, and receive emails. The most common browser software titles on the market are Internet Explorer (old school now), Google's Chrome, Mozilla Firefox, Apple's Safari, and Opera. Whether or not you can use a browser on your phone or PC depends on the operating sys

2. Browsers and W3C

We know that a browser displays information to you, but who defines what the format of this information should look like and what functionality a browser should perform? Yes, you could say Google, Mozilla, Apple, all decide on this, but there is also a common set of rules that every browser should follow. Who creates these rules? Well, the W3C. W3C is short for the World Wide Web Consortium, which is an international consortium of companies involved with the Internet and the web. The organizatio

3. Browsers Request - Introduction

When you are browsing the web, you are actually calling up a list of requests to get content from various resource directories or servers on which the content for that page is stored. It can be compared to a recipe for a cookie: you have a shopping list of ingredients (requests for content); when combined in the correct order, these ingredients bake a delicious cookie (the webpage). Importantly, the page you visit may be made up with content from different sources. This means that images may com

4. Packets

A packet is a whole bunch of data that is stored in a...you guessed it...packet or package. This packet will then travel along a given network path. Data packets are used in Internet Protocol (IP) transmissions for data that navigates the web, and in other kinds of networks.

5. Packets - Five Layers Explained

When you want to visit a webpage, chances are you will trigger the use of a TCP/IP protocol. This in turn triggers a chain of events. Your computer will bundle data together and that packet of data will pass through the TCP/IP protocol stack on the local machine, and then across the network media to the protocols on the recipient. The protocols at each layer on the sending host add information to the original data. As the user's command makes its way through the protocol stack, protocols on each

6. Packets - Example

We have seen the high-level structure of a packet, but now, let's just solidify our knowledge by going through the steps again. This time let's apply it to us visiting a webpage.

7. HTTP Protocol - Introduction

Remember that the application layer is the most important for developers. This is because it involves the HTTP protocol. HTTP means HyperText Transfer Protocol, and it is the underlying protocol used by the World Wide Web. HTTP defines how messages are formatted and transmitted, and what actions web servers and browsers should take in response to various commands.

8. HTTP - Request and Response

HTTP works as a request-response protocol between a client (your browser) and server. This lecture digs deeper into what it means to send a HTTP request and what it looks like. We will also look at the response.

9. Take a Step Back - This Stuff Is Practical

Learning about protocols, packets, and TCPs can be scary. Even more than this, it can seem impractical. This short video is just to lighten things up and remind you how important it is for developers to know this stuff.

10. Section Summary

The core technology that your browser uses to fetch and display data to your phone or computer is HTTP. In other words, HTTP allows for communication between a browser and a server. The communication itself usually takes place over TCP/IP, but any reliable transport can be used. Every HTTP interaction includes a request and a response. Every request must have a URL address and a method (like POST or GET). We have also seen that HTTP is stateless, meaning that each request is separate from each o

1. Polyfill Introduction

This section is all about polyfill.

2. What Is a Browser

First, let's understand what a browser is.

3. Do Browsers Follow a Set of Standards

Let's understand how browsers run.

4. What Is a Polyfill?

A polyfill is simply a browser fallback, made in JavaScript, which allows functionality that you expect to work in modern browsers to work in older browsers.

5. Testing Whether the forEach() Method Exists in Our Browser

Remember, a polyfill is only used if we are trying to use new code that our browser does not understand. Therefore, the starting point is to determine whether the forEach() method exists on our browser. In this case, you will see that it does exist. But for our purposes, you need to pretend that it does not exist. That's why we are building a polyfill; we are pretending that our browser does not know what the forEach() method is.

6. What Is forEach()?

Before we can build our own polyfill, we need to look at what it is we are building. The forEach() is a method on every array that we can use to execute a function on each element in that array. When using forEach(), we simply have to specify a callback function that will be executed on each element in the array.

7. Practical Example of forEach()

We know the theory. Now, let's see what the forEach method looks like and how we could use it in a real-life scenario.

8. Custom forEach() Polyfill - Introduction

Let's start building our very own forEach polyfill.

9. Custom forEach() Polyfill - First Step

We know that the first item that is passed into the forEach() method has to be our callback function. It makes sense then that the first thing we need to ensure is that the user has indeed passed a function into the forEach() method.

10. Custom forEach() Polyfill - Callback Function

The main part of the forEach() method is the callback function that iterates through each item in the array. Let's build this from scratch.

11. What Is THIS?

The 'this' keyword can cause confusion so in this lecture, we will explain what 'this' refers to in JavaScript.

12. Custom forEach() Polyfill - Final

Let's finally finish building our very own polyfill.

13. Section Summary

A quick recap on what we have done.

1. Introduction

Up until this point, you should have a very good idea about what an HTTP request is and why it's important. Now, you are ready to dive into what this course is really about-the steps the browser goes through in order to render HTML, CSS, and JS onto your device. Remember, although it can be tough, sit back, relax, and try to enjoy every moment.

2. JS Engine, Rendering Engine, and the Glue that Holds It All Together (Browser)

There are different execution contexts that exist in your browser. All of these environments have to work together in order to display content to your device. This lecture gives you a high-level summary of the environments.

3. How the Browser Works (the Steps It Takes to Fetch Data and Display It)

This lecture shows in detail how the browser works and the four steps it needs to go through in fetching data from a server and eventually displaying that data to your screen.

4. Critical Rendering Path - Introduction

The Critical Rendering Path refers to the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. This lecture is a quick introduction to the CRP and what it means.

5. Constructing the DOM - Part 1

In order to become a brilliant coder, we need to understand the steps the browser goes through in fetching data from a server, all the way to displaying the content on your screen. A large part of this process is the construction of the Document Object Model, or the DOM. This is a two-part lecture about how the DOM is constructed. Enjoy!

6. Constructing the DOM - Part 2

We have seen that your HTML, CSS, and JS files have to be sent to your computer in bytes. These bytes are then converted to characters (usually using UTF-8 encoding), but now what? A whole bunch of characters-or text-given to the browser is meaningless. How does your browser know what these characters mean? How does it know where to place all the characters? Let's find out what happens next.

7. Quick Recap

We have done a lot. Now, it's time to step back to discuss what you have learnt. Keep going. Web development is awesome, and you should be having a whole lot of fun!

8. Performance Tab - DevTools

We have discussed the Critical Rendering Path. Now, it's time to see it in action by looking at the Performance Tab in DevTools.

9. Call Tree - an Alternative Way to Analyze Your Website's Activities

Looking at all your website activity in the MAIN tab is not the only way we can look at performance. We can also look at it in tabular format. There are three different types of tables we can look at. The first is the Call Tree.

10. Bottom-Up and Event Log - an Alternative Way to Analyze Your Website's Activities

We have looked at the Call Tree; now, it's time to review the Bottom-Up and Event Log tabs. Remember, all we are doing here is trying to look at how our website performed. In other words, how quickly it managed to fetch data from a server and then display that to our screen. There are many ways to skin a cat, as they say; that's why we are looking at all the different ways we can view this critical rendering process.

11. CSSOM - Introduction

CSSOM stands for the CSS Object Model. You can think of it as a map of the CSS styles found on a webpage. It is similar to the DOM, but for CSS rather than HTML.

12. Why Do We Need to Have a CSS Tree?

When a browser displays a document, it must combine the document's content with its style information. It needs to know where to place styles and what styles to use. For this reason, a tree is needed.

13. How to View the CSSOM Process for Your Website - Recalculate Style

We have already had a look at the Parse HTML activity in DevTools. But what do we look for to find the CSSOM construction? Let's find out.

14. Render Tree - Introduction

Up until now, we have constructed the DOM and CSSOM. Are we done? Unfortunately, not. The next step is to combine the DOM and CSSOM into a render tree. The render tree is then passed to the layout phase and eventually to the paint phase, which paints the actual pixels on the screen and the content is visible to you.

15. Render Tree - Challenge

Let's look at a practical example of the render tree construction process.

16. Render Tree - Solution

Let's find out whether you managed to figure out the final render tree.

17. Quick Recap - Render Tree

Sometimes, we stand too close to the wall that we can't see the painting. This is a good time to quickly recap what you have learnt so far.

18. Comparing DOM, CSSOM, and Render Tree

Let's compare the DOM, CSSOM, and Render Tree.

19. Render Tree - Layout

We have discussed the DOM, the CSSOM, and the construction process of the render tree. There are three stages to the render tree process-the construction, layout, and painting process. When the render tree is created, its nodes and elements do not have a position and size. Calculating these values is called layout or reflow. Let's jump into the layout process, which computes the exact position and size of each node on your page.

20. Viewing the Layout Process in DevTools

Now that we know what's involved in the layout process, let's see how to practically see it happen in real life.

21. Render Tree - Paint

In the painting stage, the render tree is traversed, and the renderer's paint() method is called to display content on the screen. Painting uses the UI infrastructure component.

22. Step Back

A brief look at what we have done. We hope you have been enjoying it so far. Keep going!

1. Render Blocking Resources - Introduction

We will be looking at JavaScript shortly, but first, we will begin by concentrating on CSS. By default, CSS is treated as a render blocking resource. This just means that the browser will not construct the render tree (that is, it will not render any content) until the CSSOM is constructed. This kind of makes sense, right? You would hate to arrive on a webpage only to see a whole bunch of ugly text with no styling attached to it. This is why both the CSS and .html file are render blocking.

2. How to Make CSS Non-Render Blocking (Hint: Media Queries)

We have seen that CSS is render blocking. But sometimes, we don't want all of our CSS files to be render blocking. Remember, some CSS files are only applicable under certain conditions, such as if the screen orientation is a certain angle or size. And this is where Media Queries come into the picture. Media Queries are a CSS3 module allowing content rendering to adapt to conditions that we specify (such as screen size). It became a W3C recommended standard in 2012 and is a cornerstone technology

3. Media Types - Example

Let's look at a practical example of using the media=print query.

4. Is JavaScript Render Blocking?

We know that the word render means loading, so if something is render-blocking, it means that it is keeping the page from loading as quickly as it could. We have been discussing CSS and the fact that it is render-blocking, but we now turn our attention to JavaScript.

5. JavaScript and the DOM

JavaScript can interact with the DOM with DOM scripting, so it makes sense for us to dive into the relationship between JavaScript and the DOM in the context of render blocking resources. Enjoy!

6. The Order of Your Code Matters - Part 1

Let's code up a simple example to illustrate why the order of your code matters.

7. The Order of Your Code Matters - Part 2 (Solution)

In the previous lecture, we had a challenge. Could you figure it out?

8. JavaScript and the CSSOM

We have seen that when the browser hits a