6

例如：

<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 浏览器模型如何显示按钮吗？

4

1 回答 1

4

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

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

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

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

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

于 2010-03-02T01:12:44.510 回答