浏览器如何呈现HTML和CSS

Question

If I have the following HTML div element:

<div id="outer-div" style="Certain-Style"> 

<div id="inner-div">
</div>
....
</div>

Then how the browser will implement/render these HTML elements? Does it start with outer div then inner div then go back to apply the CSS of outer-div then the CSS of inner-div ?

Let us imagine that the style Certain-Style rotates the inner div by 90-degree clock-wise. The inner-div is an angularjs directive that displays other items according to the inner-div width. Does the rotation starts first then building the directive or it starts with building the directive then rotates?

Answer 1

Here's a quick recap of the browser's steps:

1. Process HTML markup and build the DOM tree.
2. Process CSS markup and build the CSSOM tree.
3. Combine the DOM and CSSOM into a render tree.
4. Run layout on the render tree to compute geometry of each node.
5. Paint the individual nodes to the screen.

---

My source is the developers.google. Below is the link for more details.

Render-tree Construction, Layout, and Paint