浏览器如何呈现HTML和CSS

Question

如果我有以下HTML div元素：

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

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

然后浏览器将如何实现/呈现这些HTML元素？它是从外部div然后内部div开始然后返回应用outer-div的CSS然后是inner-div的CSS？

让我们想象一下，Certain-Style样式将内部div旋转90度。 inner-div是一个angularjs指令，根据inner-div宽度显示其他项目。旋转首先开始然后构建指令，还是从构建指令开始然后旋转？

Answer 1

以下是浏览器步骤的快速回顾：

1. 处理HTML标记并构建DOM树。
2. 处理CSS标记并构建CSSOM树。
3. 将DOM和CSSOM组合到渲染树中。
4. 在渲染树上运行布局以计算每个节点的几何图形。
5. 将各个节点绘制到屏幕上。

我的来源是developers.google。以下是更多详细信息的链接。

Render-tree Construction, Layout, and Paint