如果我有下面的HTML div元素:

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

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

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

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

下面是浏览器步骤的快速回顾:

处理HTML标记并构建DOM树。 处理CSS标记并构建CSSOM树。 将DOM和CSSOM组合成一个渲染树。 在渲染树上运行layout来计算每个节点的几何体。 将各个节点绘制到屏幕上。 我的来源是developers.google。下面是更多细节的链接。

渲染树构造、布局和绘制

我认为这个视频最好地解释了浏览器中的渲染引擎是如何工作的。

https://www.youtube.com/watch? v = ce 12 boa lic

好的，我将从视频中为你总结一下。

装货设备 首先WebKit(chrome/safari中使用的渲染引擎)会做一个叫做Loader的动作。这个动作简单来说就是直接从服务器或者缓存中获取你的HTML文件。

在webkit得到HTML文件后，他会对你所有的HTML语法做标记化，标记化后他会为你做DOM树。

在令牌化中，webkit还执行名为“预加载扫描仪”的操作，简单来说，该操作看起来像是必须在以后执行的另一个操作，webkit将对其进行调度。(例如:@import，使用cdn编写标签脚本，使用外部/内部图像等)

所以在这个阶段，我们得到HTML，标记化，解析，我们得到一个DOM树。

布局 在我们从html文件中得到DOM树之后，webkit做的下一个动作是布局，这个动作基本上是从你的HTML中创建一个布局，不要忘记它只是布局而不是绘画。

实际上这是一个很长的话题，因为我不完全理解视频中所说的，所以我只是断定这一步将从前面的DOM树创建一个布局。

绘画 简单地说，这个动作将从先前创建的RenderObject绘制到你的布局中，这样你的UI将显示在你的屏幕上。