Question

例如：

<input name="abutton" type="button" value="This is not a button" />

我知道这给了我一个按钮。但我也知道有人必须弄清楚我的文字有多宽，画一个正确大小的按钮，把我的文字放在那里......等等。

让我们以Mozilla为例。我做了一些谷歌搜索，发现this，所以我认为我走在正确的轨道上。不过，第一句话就说明了一切：

页面重组：Mozilla中使用的布局引擎（众所周知）已经开始作为为Mozilla编写新布局引擎的项目，并成为Mozilla的布局引擎，并成为几乎完全重写的基础。 1998年底。

混淆。

以下是我知道存在的部分列表（来自该Mozilla页面）：

有人可以用外行的方式解释Mozilla浏览器模型如何显示按钮吗？

Answer 1

所以这实际上是一个非常复杂的问题。几年前我参与了Mozilla项目，以下是我最好的回忆：

解析HTML并将其解析为DOM标准中指定的节点。此树表示文档中数据的结构。
从该DOM树中，构建另一个称为帧树的并行树。这棵树代表了树中的视觉信息 - 像盒子模型这样的东西在这里实现。
一旦Mozilla解决了所有的相互依赖关系并构建了一个令人满意的框架树，框架树就会痛苦不堪。这里有一些步骤（视图树，小部件树），我相信它们现在已经过时了，无论如何都是特定于Mozilla的。关键是这个帧树随后被移交给图形子系统（最终调用操作系统）进行渲染。

大多数现代浏览器布局（Mozilla术语中的“重排”）页面都是递增的，因此所有这些都会在各种资源加载时一下子发生，所以这并不完全准确。

对于Mozilla信息，我建议在irc.mozilla.org上使用#developers。对于WebKit信息，您可以在chat.freenode.net上尝试#webkit。

请注意，我不再是Mozilla开发人员，自2008年以来与该项目没有任何关联，所以我完全有可能错了。随意纠正我。