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
Table of Contents (7 chapters)
Chapter 4
Critical Rendering Path - DOM, CSSOM, Render Tree
Content Locked
Section 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.