如何查看封面并查看HTML的呈现方式？

Question

例如:

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

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

我们以Mozilla为例.我做了一些谷歌搜索,发现了这一点,所以我觉得我走在正确的轨道上.不过,第一句话说的都是:

页面重组:Mozilla中使用的布局引擎(众所周知)以Mozilla编写新布局引擎的项目开始,并成为Mozilla的布局引擎,并成为1998年末几乎完全重写的基础.

混乱.

这是我知道存在的部分列表(来自该Mozilla页面):

• HTML解析器和XML解析器
• DOM实现
• CSS解析器和样式系统
• HTML解析器和XML解析器
• 基于CSS和基于HTML的布局和呈现的代码

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

Answer 1

所以这实际上是一个非常非常复杂的问题。几年前我参与了 Mozilla 项目，据我所知，这是如何运作的：

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

大多数现代浏览器都会逐步布局（Mozilla 术语中的“回流”）页面，因此所有这些都是在加载各种资源时同时发生的，因此这并不完全准确。

有关 Mozilla 信息，我会推荐 irc.mozilla.org 上的 #developers。有关 WebKit 信息，您可以尝试 chat.freenode.net 上的#webkit。

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