The Parallel Future Of The Browser

Is it goes along this paper ribbon with a pair of scissors and when it sees the opening.

Tag for an HTML element it cuts out that HTML element and it puts it on the wall into this family tree so for example if it came across a div it would cut that out.

And put that into the family tree and then the next element that comes across goes under that div and it draws a line to represent that parent-child relationship this family tree is called the Dom tree the document object model and it’s called that because it provides a model of the document which we can use to make changes whatever changes we want to make to the page so if JavaScript.

Wants to change what shows up on the page for example if we wanted to not show up some of these paragraphs on the page it can make a change to that family tree.

And then those paragraphs would disappear from the page at the end of parsing we have this family tree the Dom tree and that tells us about the structure on the page and those parent-child relationships what it doesn’t tell us is what these things should look like in order to figure out what they would look like we take the CSS that we’ve downloaded and figure out which Styles.

Apply to which of the elements in this tree so that’s the next step CSS style computation I think of CSS style computation like a person filling in a form for each one of these elements in the tree this.

Form is going to tell us exactly what this element should look like so for example it’s going to tell us what the color should be and what the font size should be it has more than 200 formfields.

On it one for every single CSS property and this worm needs to be completely filled out for every element in this tree we need to fill in all of the form fields on this form but for every element there are going to be some properties that aren’t set in our CSS files you aren’t going to type in 200.

Different declarations for everything that you have on your page so we’re gonna have to figure out values for those missing CSS properties this means going through multiple steps for each element first we figure out which rules in the CSS apply to the element and the rule is the thing between the braces you know all of those properties that you.

Declare for example if you have a paragraph and it has margin and padding the rule contains both.

That margin declaration and the padding declaration and if we’re on a Dom element if we’re going through this tree and we’re on a paragraph Dom element then that matches that rule matches that Dom element and multiple rules.

Can match a single Dom element this process of figuring out which rules apply to the Dom element that you’re on is called selector matching so we get this list of matching rules whatever we match to this particular element and then we sort those rules we figure out which is the most specific and then we.

Fill in the form field values based on that we take whatever properties it has and fill that into the form and after that we go to the next most specific and if it has values for anything that we haven’t already filled in we fill those in.

And we keep going down the list until we get to the end of this list of rules but we’re still going to have lots of empty form fields if.

None of the matching rules contained a declaration that for.

This property then that property is going to be empty some properties get a default value in this case and others inherit from their parents in that case we just look at the parent and use whatever value it has and that process is called the.

Cascade so at the end of CSS style computation each element has its form completely filled out with all of the CSS property values but there’s still a little bit more that we need to figure out we need to figure out how wide and how high things are going to be and where they’re going to be on the page the next step layout is what takes care of.

This so it looks at the dimensions of the browser window and from that it calculates those relative.

Values so if I div is 50% of its parent and we’ll figure out exactly what that means it will also do.

Things like break up a paragraph element into multiple elements one line for each pair one for each line in the paragraph and that way it knows how many lines hi the box needs to be to accommodate that whole.

Paragraph the output of this step is another tree in Firefox we call it the frame tree but in other browsers is called the render tree or the box tree and this is the ultimate.

Plan so this is that blueprint this is what tells us exactly what the page should look like now we move on to the next part of rendering which is turning that plan into the pixels on the screen before I get into the.

Details of this I want to talk about what that means what it means to put pixels on the screen you can think of the screen as basically a piece of graph paper.

There are lots of tiny boxes in rows and columns and when you’re rendering what you’re doing is you’re coloring in each one of these boxes with a single color of course there’s not actually graph paper in your computer instead there’s a part of memory called the frame buffer in that part of memory there’s a box that corresponds to every pixel it says what.

Color the pixel should be and the screen checks that part of memory every 16 milliseconds it will check that part of memory and see what the color should be for each pixel whatever colors are in that frame buffer whenever it checks or what gets shown on the on the screen but we don’t just fill in this frame buffer once we end up having.

To fill it in over and over and over again any time you have that interaction or animation anytime you ever change to the page you have to update that frame buffer even if the.

Is just highlighting something on the page though so even if you don’t have interactivity in your site that acts of highlighting means that the browser is going to need to refill this frame buffer as well this frame buffer can be pretty big depending on how big your screen is you can have millions of pixels that’s a huge piece of graph paper it means that filling in.

Pixels can take a really long time especially when there are a lot of things that are rapidly changing on the page because of this browsers have.

Figure out ways to reduce the amount of work that they have and make it faster and one way that they’ve done this is by splitting up what gets rendered into multiple different layers these layers are like you have in Photoshop or I think of them like the layers that you would have had if you were.

Doing animation in the old days like those onion skin layers that they used to do Bugs Bunny cartoons on you have the background on one layer and then the characters on another layer or multiple layers then if the characters move you don’t need to repaint the background the background just stays the same it’s only that top layer that needs to change so the first step in this process is called painting that’s where you actually create these layers and the next step is.

Called compositing that’s where you take these layers and put them together and then you basically take a picture of it and that is what goes to the screen that’s how the page gets rendered now I frame.

This as the way that a web pages content goes from HTML and CSS to pixels but what you might not know is that.

There’s another part of the browser.

The tabs and the URL bar all of that stuff that parts actually separate it’s called the browser chrome in some browsers like Firefox rendering browser Chrome is.

Also handled by the rendering engine so you have this rendering engine and it has two different tasks that it needs to do it has to render the inside of this window which is called the content and the outside which is called the Chrome actually it’s not just two tasks though because for any tab that you have open there’s going to be another content window even.

If it’s pixels aren’t showing because it’s not the selected tab it could be running JavaScript in the background so the browser has multiple things to do and they’re pretty independent of each other and this is where one of the earliest places where parallelism was introduced to the browser in 2008 you started seeing a browser take advantage of new hardware to run these all at the same time independently of each other.

But it wasn’t us that did that it was chrome when chrome launched its architecture was already using parallelism like this it’s called the multi-process architecture and that’s.

One of the reasons why chrome was faster and more responsive than firefox now I feel like I should take a step back here and explain.

What this all really means what Hardware changed specifically chrome was taking advantage of and what that change made possible so let’s do a little crash course in computers and how they work.

You can think of a computer kind of like you think of a brain there are different parts of this brain there’s a part that does the thinking so that’s addition subtraction any.

Logical operations like and or or and then there’s some short-term memory and these two are pretty close together in the same part of that brain and then there’s long term memory now these parts all have names the part that does the thinking that’s.

Called the arithmetic and logic unit the short-term memory those are called registers those two.

Are grouped together on the central processing unit or the CPU and the long-term memory is called random access memory or Ram now in order to get this brain to do anything we need to give it an instruction and this instruction is going to tell us what we need to do with some bit of the short-term memory each box of the short-term memory has a label so that.

We can refer to it and then we can use these labels in the.

Instruction to say which value the instruction should act upon for example we could add a number to a value that’s in short-term memory to get a result so.

We could add 1 to the value that’s in our for now one thing that you may have figured out from this is that we can only do one thing at a time this.

Brain can only really think one thought at a time and that was really true for most computers from the earliest computers to the mid 2000s even though these computers have these limitations.

For all those years though they were still getting faster they were.

Still able to do more every eighteen months to two years or so they were getting twice as fast you could run twice as many instructions in the same amount of time what made it possible for these computers to get faster was something called Moore’s Law the little electrical circuits that you used to build all these components like the CPU they were getting smaller and smaller.

That meant that more and more of them could fit on a chip so with more of these building blocks you can make more powerful CPUs and also there was less distance for electricity to travel between the circuits so they were able to work together faster but of course you can only make things so small and there’s only so much electricity that you can coerce through.

A circuit before you start burning it up in the early 2000s these limitations were starting to become apparent chip manufacturers had to think how are they going to make faster and faster chips the answer that they.

Came up with was splitting up this chip into more than one brain basically making it possible to think more than one thought at a time in parallel these separate brains that the CPU has are called cores.

When you hear people talk about a multi-core architecture that’s what they’re talking about even though each one of these cores or.

Each one of these brains is limited in how fast it can think if you add more of them they can do more in the same amount of time but the thing is in order to take advantage of this you need to be.

Able to split up the work that you have to do across these different cores across your different brains unlike before where the speed ups were happening automatically and programmers didn’t need to do.

Anything with this for these speed ups they actually require programmers to change the way that they code this is harder to do than you might think imagine that two of these.

Cores need to work with the same bit of.

Long-term memory they both need to add something to it well what number is going to end up in long-term memory at the end of this calculation who knows it depends on the timing of.

When the instructions run on the different cores.

So let’s walk through an example we start with the number 8 in long-term memory and both cores need to add 1 to it so our end result should be 10 instructions have to use things.