This blog is a personal self-study record, if there is any deficiency, please criticize and correct.

What did the browser do when it got HTML&CSS?

  • Building an HTML tree (DOM) from HTML
  • Building a CSS Tree from CSS (CSSOM)
  • Combine two trees into one render tree
  • Layout (document flow, box model, calculated size and location)
  • Paint (to draw border colors, text colors, shadows, etc.)
  • Composite (show the final picture according to the cascading relationship)

For example

I created 3 layers in Photoshop, one for artboard, one for structure, and one for color

  • First of all, it’s a drawing board, and there’s nothing in it

  • Next I added the structure and now you can see the outline

Stop cursing… Blind jb painting with the mouse, I have no art foundation = =)

  • And then I added color to it

  • Finally I merged the layers

  • Finally, the three layers are merged into one image

What are the main tasks of the above three layers from scratch to final composition?

1: Draw the outline

2: color

3: the synthesis of

So now we can think of contour as building an HTML tree, and color matching as building a CSS tree, but what about the final composition? Is it the browser’s final synthesis of the layers?

Yes, we can think of it as a browser rendering principle for the moment, but of course this is just a general process, browsers do more than that.

But then there’s the question, what exactly is a tree?

What is a tree?

As we all know, a tree usually has many branches. Imagine that the branches have the head tag and the body tag, and the head branches off into link and style, and the body branches off into P and div, and so on. This structure is called an HTML tree.

The picture below is use Google team to write an article: developers.google.com/web/fundame…

I’m sure this gives you a sense of what a tree is?

At the same time, the image has the Render tree, which is the tree that the end user should see.

What are Layout and Paint?

It’s easy to understand, for example, the P tag in HTML, where should we put the P tag? And then where do I put the div? Where is it located? Figure out the document flow, figure out the box model, figure out the size and location, these processes are Layout Layout;

But that’s not enough. You also need to draw colors. Does this feel like the photoshop example from the beginning, where colors are added to the outline?

Yes, for the time being, examples are just examples, but not infallible!!

What is a Composite?

And that’s the relationship to cascading, just like, in a div, there might be multiple layers, floating layers, absolute positioning layers, so the browser at the end of the stage is merging those layers.

Does this feel like the last step in the PS example again? Yeah, it does, for the moment.

Ok, so that gives us a brief overview of how the browser renders, but of course there’s a lot more to browser rendering.

Need to know more, you can take a look at this article: developers.google.com/web/fundame…