*NEW* Speed Up Webpage Loading 2021 - Part 4: CSSOM, Render Tree, Layout & Paint | Clyde Matthew | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

*NEW* Speed Up Webpage Loading 2021 - Part 4: CSSOM, Render Tree, Layout & Paint

teacher avatar Clyde Matthew, !false | funny, because its true

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

13 Lessons (37m)
    • 1. Class introduction

      1:32
    • 2. Intro to CSSOM

      1:32
    • 3. Why have a CSS Tree

      4:20
    • 4. CSS Recalculate Style

      2:38
    • 5. Render tree construction

      2:04
    • 6. Render Tree - challenge

      2:57
    • 7. Render Tree - solution

      1:15
    • 8. Combining DOM and CSS to form the render tree

      1:54
    • 9. Comparing DOM, CSSOM and Render Tree

      10:32
    • 10. Render tree layout process

      2:05
    • 11. Layout on google

      2:11
    • 12. Paint process

      1:45
    • 13. Summary

      2:06
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

13

Students

--

Projects

About This Class

WELCOME TO THIS SKILLSHARE CLASS ON HOW THE BROWSER COMBINES THE DOM, CSSOM TO EVENTUALLY PAINT PIXELS TO YOUR SCREEN

THIS IS PART 4 OF MY COMPLETE WEB SECRETS SERIES

What we cover in this particular class?

We will cover of ton of information in this entire series, but for Part 4 we're going to pick up where we left off in the previous class. We spoke about the DOM construction, so now its time to dig deeper into the CRP process. That is, how the CSSOM is constructed, and then combined with the DOM to form the render tree. I then speak about the layout process, and how this eventually results in the browser painting individual pixels to the screen. It really is full of fun-packed information. 

But let me take a step back, and explain exactly what this entire class covers. 

The DOM contains all the content of the page. CSSOM is similar to the DOM, but different. It contains all the styles of the page. In other words, the CSSOM contains all the information on how to style that DOM. And while the DOM construction is incremental, the CSSOM is not. In fact, CSS is render blocking, which means that the browser blocks page rendering until it receives and processes all of the CSS. 

Once the DOM and CSSOM has been constructed, what is the next step? Well, the render tree captures both the content and the styles. To construct the render tree, the browser checks every node, starting from root of the DOM tree, and determines which CSS rules are applied to that node. 

Interestingly, the render tree only captures visible content. This means that the <head> section doesn't contain any visible information, and is therefore not included in the render tree.

Once the render tree is built, the layout process begins. The layout is (rather obviously) dependent on the size of screen. The layout step determines where and how the elements are positioned on the page, determining the width and height of each element, and where they are in relation to each other.

Whew, we are almost done so stick with me.

The last step is painting the pixels to the screen. Once the render tree is created and layout occurs, the pixels can be painted to the screen. 

A lot to cover, right. But stick with me because we're going to have a lot of fun. 

Lets get into it.  

What this entire series covers?

Why 1-second matters hugely?

A one-second delay in page load time yields:

  • 10% fewer page views
  • Less customer satisfaction
  • Loss in conversions

Aside from influencing ranking well with Google, a few extra seconds makes a big difference to viewer attention, interest, conversions and hence profit.

Understanding the Critical Rendering Path will enable you to become an awesome programmer. Take control through understanding. Delivering a fast web experience requires a lot of work by the browser. Most of this work is hidden from web developers: we write the markup, and a nice looking page comes out on the screen. But how exactly does the browser go from consuming our HTML, CSS, and JavaScript to rendered pixels on the screen? By understanding this, you will be able to write better code in order to boost your website traffic, know how to precision fix and tweak behaviour and performance, improve your market penetration and your margins. You’ll also gain an advantages over other developers who seem to just push the buttons without fully appreciating what is happening.

In this course you’ll 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’ll start exploring and experimenting with tools to measure performance. You’ll 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 Skillshare series covers a whole bunch of interesting material.

By the end of this Skillshare CRP Series, you'll 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. We dig deeper in every lecture, learning about things like HTTP, TCP, data packets, render blocking resources, and a whole bunch more! This course has many bonus lectures which extend your knowledge base and test your skills.

Through practical examples, this course helps you understand the CRP piece by piece. And we use the latest and best features of JavaScript and browsers (like the new Fetch API) along the way so you can stay ahead of the pack.

Is this course for you?

Absolutely.

It doesn't matter where you are in your web development journey. It's suitable for all levels.

Still unsure? If you fit in any of these categories then this course is perfect for you:

Student #1: You want to dabble in the world of programming: learning the fundamentals of HTTP, AJAX, Data Packets and Rendering will allow you to extend this knowledge to any language

Student #2: You want to gain a solid understanding of web performance

Student #3: You want to start using backend frameworks like Node.js, which are heavily dependent on having a deeper knowledge about how to make AJAX requests, manipulate the response and then deliver it to the screen

Student #4: You know what the Critical Rendering Path is, but have little knowledge about how it works behind the scenes, and how to practically implement it in your code

Student #5: You have taken other courses in web development but just don’t feel like you’ve grasped it

WHAT ARE YOU WAITING FOR. LETS GET CRACK’

Meet Your Teacher

Teacher Profile Image

Clyde Matthew

!false | funny, because its true

Teacher

Ideas are a dime a dozen. The hard part is execution. Unfortunately, most people never carry tasks to completion.

 

I've worn many hats in my career …  As a result, I have an ability to view all sides of a coin, something that is becoming crucial in our tech-savvy world.  

 

My experience and a few words:

 

·        I’ve had to learn things the hard way (aka: hard slog)

·        I want to teach people what I’ve learnt, with the hope of making a meaningful impact (cliché, but true)

·        No one is a master of everything. But at the same time... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Class introduction: My dear students, welcome back skill share students, welcome back to another awesome class. And as you would have noticed, we've just country and the previous class, the DOM tree, but we have not quite finished. We haven't even got to the remainder's three stage in order to get to their industry strange who had sort of a tongue twister in order to get to the render tree stage. Now that will render engine needs to have constructed the DOM, but also what's known as the CSS on what? Weird, right, Anna. But don't worry, that's what this class is going to get into. We're going to be talking about why we need a CS history in the first place. Powdery industry constructs this CSS. And then we're going to be talking about how the DOM and CSS AMA combined to form the render tree harbor layout works. And finally, how the browser paints or the pixels onto the screen. This is getting quite heavy. This camera. So anyway, it's going to be evict, it's going to be super, super interesting. I'm excited, uh, hope you ought to hope you sticking with me through all these clauses, Medea students, because each one builds on the other cruisers loss for well, it's for everyone. If you're experienced, doesn't matter. You're going to learn something new. And if you beginning out trying to understand how the DOM works, how to optimize your site speed when you're building web pages. This is for you as well. So really it's for everyone. I'm super, super, super excited, but enough talk. Let's jump into the first lecture. See you now. 2. Intro to CSSOM: We've seen that the first date is full of browser to render the DOM. And this happens in sequential steps. We seen the computer bots. Those bytes are converted into characters, which will then convert it into tokens, which I'll then stretch it in an organized way into nodes. And met is the basis of the DOM. Most people know this. Most people know that is something called the DOM. But in the same way, this also a CSS tree structure. And that's called the CSS object model or CSS for short. Well, how does this fit in? Well, if we look at a standard HTML file, we can see here that it is a reference to our styles.css file. When the browser encounters that link tag in the head section of the document, it anticipates that it needs this resource to render the page vaccines. And because of that, it goes out in features that file. It makes a request for that file to the server. And when it makes this request, that's when the CSS on can stop being created. And as you may have guessed that it has to go through the same process. The CSS file is seen to computer and bytes. Let's bind to convert it into characters. Those characters into tokens as tokens into nodes. And net can form the CSS DOM tree. I heard this starting to make scenes. Don't worry, we're gonna be doing a lot more of this in the upcoming lectures. Let's go. 3. Why have a CSS Tree: Before we dive deeply into the CSS on, I just want to take a step back. I want us to start at the beginning against this. All I'm doing here, we're going to ease into it and we're gonna get more and more complex as we go along. Let's start with a very basic HTML file. We've got a body element. And under their body element, we're going to have a paragraph and an image. That's it, conquered more simple than us and we starting at the HTML, because that's the source of our entire site that way your CSS has to come from. But why does the CSS on heavy tree structure at all? Why do we need to create an object model for CSS? Well, when computing the final set of rules for any object on the page, the browser starts with a most general rule applicable to that node. For example, if it is a child of a body element, then all the body styles will apply to that child element. Vaccines, right? The browser then recursively refines the computed style by applying more specific rules to it. And in this sense, the styles cascade. That's why it's called CSS cascading style sheets. So hitting back to our example, we've got a very simple HTML skeleton. But let's now start applying CSS rules to it. Let's say on the body, we provide a font size of 1.5 in. Simple enough, what do you think's going to happen out to the paragraph tag? Well, I'm sure you guessed it. The font size from the body has cascaded down to the paragraph tag. That's why I put it in bolts. Everything that cascades down as in bold. That paragraph has now also received a font size of 1.5 in that cascaded down. What about the image? While the image tag also gets the same font size, doesn't it make sense that this doesn't stop us from defining our own rules on those elements. For example, on the paragraph tag, we can apply the color blue to it. That's our own custom style. Will in what happens when we have a span tag, a child element within the paragraph, what happens in that's right, you guessed it. It inherits the font size all the way from the body, which cascaded down to the paragraph, which now has cascaded down to span. And the span tag also receives the color blue from the paragraph. And again, we can apply our own custom styles to the span element. Now let me ask you this and there might not be that intuitive. But do you think was on the screen now, for our very simple site, do you think that is the entire CSS? Will it's not the entire CSS on. And the reason for that is that these styles that we've put on the screen now, these are only the styles that we've overridden in the stylesheet. But by default, other styles will be applied to website. Let's have a look here at what I mean. So yeah, we have a brand new page. All I'm gonna do is I'm gonna go to google.com. You can see when we at Google.com it's got its own styles, maternal CSS styles. And now if we inspect this, this is what I wanted to show you. You can see that we've got a whole lot of styles here called user agent styles, or it's from the user agent style sheet. All this means is that the browser has its own default set of styles that it applies to the page and the styles that we given our own cheats. They just merely override the styles because these are at the most broad at the top level. In East valid, we apply this more specific and network cascades down. I hope this makes sense. But now let's start getting into a bit more detail. And then we'll go. 4. CSS Recalculate Style: This is what I love about doing tutorials with you and going through lessons. Because as we get more advanced with I can just, I can go through these things a lot quicker in getting onto the CSS DOM again, let's take a look. Remember our site that we created and we assist the whole critical rendering path and we had a look at it previously. List do the same, but let's look now specifically at the CSS component of it. Cools. Let's have a look at this. Let's see what it looks like from a critical rendering path point of view. So let's open aside, it's waiting for the image. They would go speech style image. This go to the dev tools. We're going to go the Performance tab again, and we're gonna reload and this time record the entire render process. Let's do that. And Bob's your uncle dan and dusted. And where do we find? Our Cs is tossing time engineers. Well, yes, the one place we can look is in the main tab. And if we just narrow the selection here, we can start finding where the CSS was located with a parsing started to happen. Bats is an easier way and that is on those tabs at the bottom. Remember we looked at them. So if we look at bottom-up, for example, and remember what bottom-up was, right? Bottom-up just shows the activities that took the most amount of time. Not necessarily the root activities, but just every single activity. And which one took the most time and it's sorted by that. So you can see here parsing the HTML has to do with the DOM. We've seen it already enact takes 25 milliseconds. Okay? But that's not what we want, we wanting the CSS. And unfortunately, unlike the DOM, this browser doesn't show a POS, CSS section separately. Instead, it's got something called recalculate style. And thus one event captures both the parsing of the CSS style sheet, the construction of the actual tree, CSS on tree, plus any recursive style calculations that need to be done. So these can be found in the recalculate style, task or activity. So let's find it. So we can see here, this is a list of all the activities that took the most amount of time. And if we scroll down, we should be refined at relatively quickly. And here it is. Recalculate style. That's any taken 0.6 milliseconds. So you can see in our instance, our CSS is incredibly simple and it takes very quick to actually render their tree and displayed to the page. 5. Render tree construction: Let's take a bit of a step back in the previous sections. And up until now we bolt the DOM via HTML. And we've also bolt the CSS or via the CSS input. However, both of these you'd agree with me, they are completely independent objects that captured different aspects of the document. The DOM describes the content, and the CSS ON describes the style rules that need to be applied to the entire document. So we've done a lot. We've done these two independent data structures. We know what they are. We seen the kind of a high level anyway of the critical rendering path, how these get constructed during the process of rendering data to screen. The question is what happens now? Well, remember with the render process we had the four steps, we've done the first step and that is the construction of the DOM and the construction of the CSS on the second step all involve the render tree. And the first step is what? That rides. The CSS and the DOM has to be combined in order to make the render tree. This render tree is then used to compute the layout of each visible element and it serves as an input to the paint process that renders the pixels to the screen. So optimizing each of these steps is crucial to achieving optimal rendering performance. So just remember that render tree only contains nodes required to Grindr that page, that layout process, which we're gonna be looking later on in this course that computes the exact position and size of each object. And the last step, which we'll also look at lead in the course is the painting process which takes the final render tree. It renders the pixels to our screen. This was just a quick step back to kind of give you a high-level overview of what we've discussed so far. And also realize that the next step now is to construct a render tree. Okay? And that's what we're going to be talking about in the upcoming lectures. 6. Render Tree - challenge: I really want you to understand what the render tree is. And in order to do so, I just want to drive the point home by giving you a practical example and a bit of a challenge to try and figure out what the render tree is gonna be short-term camps. I hope this has been cured of a hobby and, and fun. Let's get into it. Let's start at the beginning with the DOM, Andrew and bought the DOM is, the DOM refers to the HTML that tried. So let's start with a very simple HTML page. And let's say our HTML has three elements in it. Metadata has a link tag and it has a body element. And let cell body element has a paragraph which just says hello world to the screen. Okay? You with me so far. Let's say our paragraph has a nested span element. And that span element just says, hello, again. Nested within the body element, we also had a div tag. And let's just say under the div tag we also have an image element I k. So this is our DOM. You'd agree with me, these are the nodes that represent the entire structure of our page of our document. Ok, you with me. So I thought, Cool, let's now construct our CSS on. So the route we are going to have the body. And let's just say the font size of this as 1.5 him within the body. Say, we want to style our paragraph tag. And we went there to have the color blue. And just bear in mind, you'll notice that all the cascading styles, I've put Chair in very light gray font so you can see the font size has cascaded down from the body element. Makes sense. Now under the paragraph, we have our span. So the first thing is we now span element is going to inherit the font size of 1.5 MB. It's going to inherit the color blue because we've actually applied our own style on the paragraph of blue. Then we can also apply our own rules. In this instance, let's hide the span tag in dying. Let's apply the display property of non to it, which is what we've done here. And then this just style our image tag. We can just put margin top of 20 pixels. Again, the font size is cascaded down to it. The $1 million question is drumroll, please. What will the render tree look like? Remember what the render tree was? It was combining the DOM and CSS on together to form what's actually going to be displayed on the screen. So before I go on, can you just quickly pause this video and figure this one else? Try and draw it out, get it painted a piece of paper. Try and draw. Do you think that our industry is gonna look like? 7. Render Tree - solution: Okay. I hope together to go. It doesn't matter whether you got it right or wrong. It's just important to try it because it is going to solidify what you've been learning. Let's look at the render tree. The starting point with the reindeer increase. To begin with our body, we know that our body is shown on the screen and we know that we gave it a font size of 1.5 in. If you guessed it. Well, then we're going to display the paragraph and the div tags. The paragraph is going to have the font size of 1.5 m is going to be colored blue. And it's going to show hello world to the screen. The div tag is going to have the image, which again has the styles that we applied to it. But you will notice that the span tag is excluded from the render tree. And the reason that is is that we applied a display style of none to that span element. In other words, we've hidden it from the render. And that's why the render tree has to combine the DOM and CSS arm in order to form the final tree. Okay, it makes sense this is what's actually going to be displayed, the Live display on your webpage. Hope is becoming more turnover. Herbie, having fun. Let's continue. 8. Combining DOM and CSS to form the render tree: To drive this point home one more time, I'm just going to quickly recap what we've done remainder to construct the render tree that browser roughly does the following things. Starting at the root of the DOM tree, the traverses each node and in our case yells to very simple HTML setup militias have HTML. We have the body tags within the body tags, let's have two paragraph tags. One sees alone are the ones his world. Now the first thing before we even get onto the CSS, the render tree has to traverse each visible node, and some nodes are not visible by default. For example, script tags on opposable meta tags and so on and so forth. These are emitted from the render tree since they are not reflected in the rendered output to the screen, that makes the interrupt. Then we get onto our CSS. So let's just apply a font size of 18 pixels to the body. And on the paragraph tag with the class Jaime, it's not display that to the screen. Show as you've already guessed it. There are in the tree, is going to have the HTML tags. You're going to have the body tanks. The body takes gonna have a size of 18 pixels are applied to it. And we're going to have our paragraph tags. And awake we not only because the one has display none. So our final render trees, and you're going to be displaying one paragraph tag called wall. So just remember, the render tree contains all visible DOM elements on a page. And a combines the DOM and the CSS. And the important thing you need to know is that the hidden elements will be visible in the DOM, but they won't be visible in the render tree. Grant, I think we're starting to understand this now. And I want to just write some code with you. And I want us to do an example together. Just to solidify this knowledge. I'll see you soon. 9. Comparing DOM, CSSOM and Render Tree: Let's have a look at what I mean when I said that the DOM is different to the render tree and that the dominant CSS lived in separate environments and they are combined to form the render tree. It really is quite easy and intuitive, but you need to understand it in order to get to that point. So what should we make? Well, let me just show you. So all I wanna do is I want us to create a very simple hello day sir, are now been added to the DOM. I want us to then fetch an image from a server. And then we can just display something below just for fun. And then when you click on the image, I want the text to be removed from the page. So very simple and we're going to be the same as looking at the inspected to see the dominant render tree and how they differ. Again. So that's our end goal, is get better coding software and let's wrap this up quickly. But first, let me get rid of my FES goal to let start coding. First thing is let's create a index.html file. And we can just create a HTML5 templates. Nothing new. And we can call this the render tree. We are going to need style solicitous, link tower style sheet. We'll call it styles.css. And we can create a style sheets. Yeah, we're not gonna do anything with it yet. So Yaso, HTML, he has our status. And just so you can see what our HTML looks like as we go and let me just open it up. So right now we've got a blank HTML page, which is expected, but let's keep going. Okay, so let us now have a paragraph tag with the word hello in it. And you can see that they are displayed on the screen. And then let's create a span tag and we can just say hello, the Wally warthogs. Nice to see you again. There you go. So there's our paragraph and he's our span. What's very irritating knows that the paragraph tag by default is a block elements. That's why we've got hello. And then it cuts to the new alliances. They all warthogs, delicious DOTA style sheet. And in our style sheet lists just call our paragraph tag. And let's say that the display property needs to be enlightened and is just make the color blue. And why hasn't that worked? And quick way to see is to inspect the documents console log nor I think has happened. Yeah, I think I've called this thing years. Could look what's called style.css. So I actually called this style.css. And the, let's fix the problem. Hello, they Wally waterlogged. Nice to see you again. And just for fun, let's get our span and let's change that color to red. So there you go. Hello day Wally will talk nice to see the blue hellos and a paragraph. The red is in a span element. So far so good. Let's now fh tau image. The source astronomer websites. You can use the plethora. You can even use one on your own desktop, but there are a plethora of websites you can use. I'm just gonna use place image.com. And we can define the size list, just said 640 via donor for 80. And it can be any image. And then we fish from a server to spend it on the screen. And now let's just have some fun that sought garden. So in this case I'm just going to have our script in line and Osaka based practice, but let's just write our JavaScript in line here. And let's start. Playing around. So let's grab our span element by using the browsers in Bolt document.getElementsByTagName method. And we wanna get the span. Now this actually returns a node list to us, doesn't actually return the first span as an object in JavaScript. And hey, if you don't know this or you want to learn more, please do Marcos, my complete JavaScript grandmaster course. That really is awesome. But for now, just realize that this returns a node list, which means we need to access the first item of the array. And what to do that we access the first item in the array. Now we've got our span and let's, let's y'all, this is getting quite cool. Let's manipulate the DOM. So let's change the DOM via JavaScript. A lot cool nows if you understanding what the DOM is. So let's take the span leads to fit in the HTML. And let's say, instead of saying hello, the Wailing Wall told, which we've done above, let's change it to saying hello the so along the surface, I have now being added to the DOM. And if we save this, what do you think will happen? That is 100% correct. Dom has now been changed and yeast we've changed it with JavaScript. So in effect, this is actually pointless, the first span element, but I just wanted to show you how you can use JavaScript to change the DOM cases. The one thing I wanted to show you, but let's now start defining some variables. Let's do something else that's defined some variables. Lake name equals Wally for arguments sake. And late display.text equal and misuse template literals. Again, if you don't understand what this is, please view my JavaScript competing with grandmaster calls. And we're just going to say, welcome. Molly. And I'm doing this for your sake, just to understand and get a more better intuitive feel, but how to manipulate them. Dom, how to write JavaScript. It's fun. I'm joined us and let's create a new depth element. So it's xy is the browser's HTML document, create element method, create element method. And it's created a div tag. And again, we've just changed the DOM via JavaScript. How cool is this, guys? We've added a div tag to our DOM and is a very specific reason I'm doing all this. So please bear with me. I want to access our newly created element. And let's exit that textContent property and let's display the text. It saved this and you can see nothing's happened. And that makes sense because we haven't painted this div. We've created a div element, but we haven't told the browser way to put that development. So right now it's just floating around at the sunny. So in order to put it somewhere, quite a X's the body of our document and we want to append it to that draft, doesn't make sense. We want to attain this new div to it. Now if we save, There you go. Boom, you've got welcome. 1y. So this is just as playing around us is changing the DOM. What about CSAs? Well, let's now change the CSS on. How do we do that? Well, we can do it very easily. We can access out of tape via JavaScript. We can access the style property and change the color property on it. So I don't know green. Let's just give that a day. We've saved it and you can see, welcome, Wally is now in green. This is how easy it is to manipulate the CSS on. The final part of this is just allowing us to click on that image. And then when we click on that image, we went to remove that span tag, will their green text you see on the screen? And it's really simple. All we have to do is create an event listener on the image that executes the function when it's clicked. I noticed, rather than JavaScript for equity. So it within our image, we want to do is we're gonna create an onclick event, right? And let's just call it, what should we call it an remove span. Okay, that gets executed. That means within here, we need to define a function removes spent, and let's do that. Let's define a function called remove span. Again, what do we have to do? Well, we have to access our span element that we've created above within FDA access at style property. And we want to access the display property within it. And we want to display as none. And that should remove it if we refresh this and now we click on the image, it's gone. But can you see how this is? This image is now calls the ticks to Galton's or funny. So all we have to do is go to style and we have to now change this image to a block element sits within its own blog. Otherwise it's going to be in-line with hello. That's what's happening here. It's why I'm looking funny. So we have to add xy style image. And let's just give it a display of block. Ada says fixed at the margins, look terrible. And I don't have to do this, but you know what Delicious goes to him at the top and to him at the bottom. Store, those terrible but at least you're getting more comfortable with had occurred and how it all works. And there we have it is our page, how coolers us again? So we've actually written pretty much most of this in JavaScript, learn plain vanilla JavaScript. And it just shows you how we can manipulate the CSS and the DOM with JavaScript. And what's cool is list. Let's refresh this or get a Willis don't reef fishes. Let's just have a look at what we can see now if we inspect us document, what's very cool is that here we can see the DOM and do notice what's interesting about this DOM. Let's write it has the span tag, but this span is not on the render tree because it's not rendered to the screen. We can't see it on the screen. We can see how low. We can go to our dimension. We can go to our Dove welcome 10R. I'll image, we can select it all there, but I'll span is on our DOM, but we cannot see it on the render tree. I'm just I know I'm repeating myself, but I'm just trying to really drive this point home. And what's really cool is that JavaScript can change the DOM on the fly. So if we refresh our page, share is our span tag, which we can now see that on the render tree, we can see at that day. But as soon as I click this imagery, it's removed. The display non-property is added to the span element and it's gone. The render tree then has changed. Okay, so that's what I wanted to get across the sludge. I hope you had fun, hope you learning. I'll see you in the next lecture. 10. Render tree layout process: Up until this point, we've calculated which nodes should be visible. And these styles, we've calculated the DOM and we've compared to DOM, to the CSS on and the render tree. We've kind of, we've just seen that it's been fun, it's been intuitive, but we haven't gone into discussion about how the browser calculates the exact position and size within the view port of the device. This is the layout stage, also known as reflux. So we're at the point now in the render tree process we are browser has to figure out where everything goes. And in order to figure out the exact size and position of each of our elements on the page. The browser has to begin at the root of the render tree and it has to traverse it. Sometimes it can take time because the browsers require a lot of work and we're going to see quickly after this and how to see how long this talk. But for now, let's just keep the example very simple. Let's say the render tree is what you've seen on the screen. Now, HTML our body, and it's got one paragraph called World. What's going to happen? Like I said, the browsers has to traverse, thus render tree and extract all the CSS properties from it. And they ended literally just has to go through each one. And you can see that on our body tag, we've added our own custom style size of 18 pixels. So what's going to happen is that obviously the CSS on has to be updated to include a font size of 18 pixels. Now your browser will then have to traverse this, that would have to go through it. So if we start with our big wall, initially, the font size is 18, so that has to be reduced. The margin left and right will push that wall right to the left of the screen. Of course, the margin top and margin bottom will have to be created. And the display block property will push it up within those margins. Says kind of basically how your browser determines the position of each single item on your page. 11. Layout on google: Okay, so we've seen the parsed HTML relates to the DOM, we've seen agreed calculate style relates to the CSS on batch. How do we assist the layout? Well, actually it's very simple. So here we are just in google.com and it's inspectors page. Let's go to the performance and its record, the performance of the page load. Ooh, we've got it. The first thing we need to bear in mind here is that the layout event, it captures the render tree construction position, and size calculation in this performance timeline, when the layout is complete, the browser will then issue a paint set-up and paint debates, which converts the render tree to actual pixels we see on the screen. Let's look at the event log tab because that's very intuitive. And remember what the event log shows assets intruder for a reason because it does it sequentially does whatever happens first gets loaded in the event log and in each event off the debt to be loaded. So we would expect the DOM to be created, right, the parsed HTML, we should be refined it relatively soon in a stack. What happens after the DOM or we should be receded CSS, that recalculate style off the deck. We should see the layout stationary. Well, let's have a look and see if that is what I expect. So we can just scroll down here. Well, these are parsed HTML. We can see that happenings that Dom's getting created. If we scroll further down, we've got the recalculate style and below that, we've got the layout. So exactly what we would expect. Then yo how long does this layer process happen? We'll obviously, it depends on the size of your document applied styles in the device it's running on. But I mean, obviously larger the document and will work the browser has to do. And the more complicated the styles, the more time taken for the painting process. Also, for example, solid colors, cheap to paint while a drop shadow is more expensive to compute and render, could really be getting into these in a bit more detail later. So let's keep going. 12. Paint process: We've just had a look at the layout process and the output of that is what's known in the industry as a box model. And this box model just precisely catches the exact position and size of each element within the viewport. All of the relative measurements are converted to absolute pixels on the screen. And finally, now that we know which nodes are visible, they computed styles and the location state geometry. We can pass these pieces of information to the final stage, which converts each node in the render tree, the actual pictures on the screen. And this step is often referred to as the painting or Rostra rising stage. In our previous example, we wanted to do was paint those pixels on the screen. And that's what the painting process is all about. And usually this painting process is very fast. And I can show you how Faustus painting process is by just visiting some random side. Let's have a look. Let's just go to an Apple. Yeah, we got a system spec this page. Let's go to the performance tab and let's record the performance. In the ego. You'd agree with me, this is quite a complicated website. There's a lot going on. There's a lot of content that needs to be downloaded, is a lot to do. Look at the painting. The painting process on this entire site took 32 milliseconds. So that just proves my point. The painting process usually is not a very long time. It's very last thing that happens before pixels can be displayed on your screen. 13. Summary: Take a step back again and let's just see what it is we've done. Remember, without HTML and CSS, we seen both of those to the computer in bytes, which will convert it into characters, which are converted into tokens, nodes, et cetera, et cetera, all the way until the DOM and CSS on trees are created. But as you remember, these are two independent daughter structures, which is why we need to combine them in order to form the render tree. So the render tree is being constructed. Once the construction of the render tree is completed, we can narrow begin the layout process and the painting process. The layout process computes the geometry of every single node on the viewport. And of course, the painting process thin paints those individual nodes to the screen in pixels. And only once all of this is done can we get with final rendered product. And this whole paralysis is referred to as the critical rendering path. This may look simple, but it requires quite a bit of work. If either the DOM or the CSS on were modified, you'd have to repeat the process in order to figure out which pixels would need to be re-rendered on the screen. And it's no surprise that optimizing the critical rendering path is the process of minimizing the total amount of time spent performing all of these steps. Doing so will render the content to the screen as quickly as possible. And it also reduces the amount of time between screen updates after the initial render. That is, you get higher refreshed rates for interactive content. So the question you're probably asking is cool client, how do we optimize this process? We know what it is, we know how it all works. But I wanna make IT quick. I want to be an awesome coda. The starting point was optimizing this process is to understand render, blocking resources. Let me explain what I mean in the upcoming lectures. See you now.