浏览器如何渲染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的宽度显示其他项目。是否首先进行旋转，然后才构建指令呢？还是先构建指令，然后再旋转呢？

- hex

Answer 1

以下是关于浏览器执行步骤的简要概括：

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

---

该内容来源于 Google 开发者文档。以下是详细信息链接：

Render-tree Construction, Layout, and Paint

- sammyb123

---

请避免仅提供链接答案。那些“几乎只是指向外部网站的链接” 的回答可能会被删除(http://stackoverflow.com/help/deleted-answers)。 - Quentin

我怀疑谷歌不会很快删除其开发者部分，但我感谢这个注意事项，我没有想到过。已经对我的回答进行了修改。 - sammyb123

你的更改和在答案中添加步骤摘要让我给你点赞。 - Martin

总结一下：它从外部 div 开始应用其 CSS 样式，然后进入内部 div 并应用其 CSS。 - hex

我会说是的，因为当它创建渲染树时，它会合并可见节点并向下遍历。 - sammyb123

Answer 2

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

https://www.youtube.com/watch?v=CE12cBoalIc

好的，我会为您从那个视频中总结一下。

加载器

首先，WebKit（Chrome/Safari中使用的渲染引擎）将执行称为“加载器”的操作。这个操作简要地说，将直接从服务器或缓存存储获取您的HTML文件。

在WebKit获取HTML文件之后，它将对所有HTML语法进行标记化，然后为您创建DOM树。

从标记化开始，WebKit还会执行称为“预加载扫描器”的操作，这个操作简要地说，将查找必须稍后执行的其他操作，并安排它们。（例如：@import、使用CDN的脚本标签、使用外部/内部图像等）

因此，在这个阶段，我们获取HTML，进行标记化、解析，然后得到一个DOM树。

布局

在从我们的HTML文件获取DOM树之后，WebKit执行的下一个操作是布局，这个操作基本上将从您的HTML创建一个布局，但请记住，这只是布局而不是绘画。

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

绘画

简单来说，这个操作将从之前创建的RenderObject绘制到您的布局中，这样您的UI就会在屏幕上显示。

- Muhammad Ichsan