# 如工程师般探究复杂性——以 Ladybird 浏览器为例 [译]

- Link: https://paooo.com/ai-study/8440/
- Published: 2024-07-11T12:16:52+08:00
- Author: 宝玉的分享

⚡ Prompt 语宙 AI 导读 · 30 秒核心看点Ladybird 由志愿者从零构建，连 JPEG 读取模块都未复用，仍能运行成熟浏览器功能。实测显示它已支持 HTTPS、CSS、Unicode、WOFF 字体和 JPEG 渲染，接近真正可用浏览器。一次网格布局崩溃最终定位为无效 CSS 规则，修复后浏览器不再崩溃，验证了工程化排障路径。.four { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(auto-fit, auto);}📋 一键复制 Prompt 咒语 要掌握复杂性的精髓，最佳策略往往是拆解后再重建。这正是一群志愿者，在一位前 Safari 开发者的带领下所做的事情。他们从零开始打造了一个成熟的操作系统SerenityOS，和一个网络浏览器Ladybird（这意味着：他们没有复用任何现有模块，比如读取 JPEG 文件的模块）。他们如同真正的工程师一般，出于_乐趣_而投入这项工作。听起来不错，但你可能会怀疑，用这种方式能构建出一个具备所有复杂功能的网络浏览器吗？这正是一个探索工程师如何面对复杂性的故事。 被称为“浏览器引擎”的复杂性 二十年前，你可能会为你的网站手写 HTML，或许会用 PHP 来生成。但今天的网站要复杂得多。例如，Dialogic 最近推出的网站需要大约 700 个 JavaScript 模块，并有大约 19,000 行的代码。然而，更令人震惊的复杂性隐藏在表面之下：仅这个网站就可能依赖于其他 130 万（！）行代码。这还不包括支撑网站运作的浏览器引擎和操作系统——也就是说，实际上完成所有繁重工作的软件。想象一下这些引擎需要完成的任务：解析 HTML 和 CSS，决定各部分如何布局，解码多种图像和视频格式，解析和执行 JavaScript 代码，处理安全连接等等。现代浏览器的开发耗费了数十年的时间和巨大的努力，背后是 Google（Chrome）和 Apple（Safari）等公司的推动。 出于好奇，我亲自试用了 Ladybird 浏览器，想看看它的性能如何。这些爱好者没可能达到大公司的水平，对吧？安装它需要一些技巧，因为他们没有提供 Ladybird 的下载链接——记住，这个项目是为了让爱好者寻找乐趣——所以你需要下载源代码并自行构建。这个过程比听起来简单，不久后，一个荷兰新闻网站就成功加载在我的屏幕上了： 如果你知道要寻找什么，你会立即注意到，这已经不仅仅是个业余项目了，实际上，它比创造者所言更接近于一个真正的浏览器： 网站能够通过 HTTPS 无障碍加载，这意味着背后有大量的加密和网络编程工作。 该网站的外观和功能几乎完美，说明实现了相当多的 CSS，并可能还包括了不少 JavaScript。光是首页就加载了 103 个文件，而浏览器似乎毫无压力地处理了它们全部！ 字体显示正常，说明浏览器能够正确读取（WOFF 格式）并渲染字体。能够显示文本，也意味着该浏览器支持 Unicode。 有 JPEG 图像显示，说明他们已经解决了图像解码、调整大小以适应屏幕等一系列问题。 浏览器的外观类似 Safari，包括标签页和检查工具，看起来就像一个原生的 macOS 应用。这意味着，这群人不仅为自己的业余操作系统构建了一个浏览器，实际上还开发了一个完整的 macOS 应用程序及其所需的兼容层（他们称之为“Lagom”），使这个浏览器能在其他操作系统上运行。 你可能会问，为什么不测试你之前提到的那个光鲜亮丽的新 Dialogic 网站呢？嗯…… 遇到崩溃了，所以是时候找开发者反馈问题了吗？别急，记得这个项目的初衷是_乐趣_，所以这些开发者可能更愿意投入时间在比这个小问题更有趣的事项上。不过，让我们看看能否自己解决这个问题。首先，尝试用尽可能简单的代码复现同样的问题。错误信息暗示问题与网站使用的_网格布局_有关，这是个已知的复杂点。我最初的猜测是浏览器引擎不支持动态 CSS 计算（使用_calc(…)_)，但实际上它处理得很好。在代码中加入一些打印语句后，我最终确定问题出在网站上的另一个网格布局上。这个布局的 CSS 如下： 找到问题后，我决定向开发者提交一个问题，询问他们我应该查看哪里来解决这个问题（在开源社区，人们通常喜欢你能提供一个清晰的描述和可重现的测试案例，但如果你能帮忙解决问题，他们会更加欢迎！）。几分钟后，他们就指引我查看 CSS 规范，我发现我的 CSS 实际上是不符合规范的——‘repeat(auto-fit, auto)’中不允许使用‘auto’。如果我之前在 Safari 检查器中检查过，就会发现它也忽略了这一行 。在 Ladybird 中修复这个问题，只需让它也忽略这个无效的 CSS 规则。这就是我所做的，结果如下： 尽管布局还不尽如人意（一些 SVG 图标未显示，页面过宽，还有分词的破折号），浏览器不再崩溃，网站实际上是可用的。我很好奇这个以乐趣为出发点的项目一年后会有怎样的进展。 对我而言，这个故事的启示是：巨大的复杂性并不意味着无法理解，也不代表“拆解再重建”的方法不可行——如果你有足够的动力和技能，就能够独立取得很大的进展，正如这个项目所展示的。老实说，我们并非都能成为这些开发者那样的超级程序员——至少我不是——但这个故事告诉我们，每个人都有可能做出有意义的贡献。如果直接拆解重建对你来说太难，不妨尝试为他人的项目贡献一份力量——这样做非常有成就感，而且的确很有_乐趣_。 ❓ 常见问题解答（FAQ）Ladybird 浏览器真的能正常打开网页吗？可以。文中实测它能通过 HTTPS 加载网页，正确渲染字体、文本和 JPEG 图片，首页还可处理 103 个文件，说明它已具备相当完整的浏览器能力。Ladybird 崩溃问题最后是怎么修复的？作者通过复现、加打印和对照 CSS 规范定位到问题：页面使用了不合法的 `repeat(auto-fit, auto)`。Ladybird 只需像 Safari 一样忽略这条无效规则即可避免崩溃。这篇文章想说明什么工程方法？核心观点是：复杂系统不一定不可理解，拆解后再重建是一种可行路径。即使无法从零做出完整浏览器，也可以通过贡献开源项目参与复杂工程。🔬 语宙深潜追问 · 进阶实操拆解重建浏览器最先攻克哪一层？先做可验证的最小闭环：网络请求、HTML 解析、基础布局和文本渲染。优先保证能打开页面并看见内容，再逐步补字体、图片、脚本和 CSS 兼容性。复杂系统不是一次写完，而是通过可测试的增量迭代逼近完整行为。遇到布局崩溃该怎么定位？先把问题缩到最小复现样例，再按渲染管线分层排查：样式解析、盒模型、网格/弹性布局、绘制顺序。对浏览器这类系统，很多崩溃不是“算法错了”，而是对无效或边界 CSS 的处理不一致，修复时要优先保证容错。🗳️ 读者观点微投票 · 您的实战立场是？复杂浏览器引擎真能靠工程拆出来吗？能，边做边收敛投票只能靠大团队堆人投票先做最小可用内核投票🕸️ 语宙向量知识图谱 · 语义强关联深度内链🐋 所属权威专题：DeepSeek 深度实战与部署 →Ego Lite – 专为AI Agent设计的浏览器，实现人与AI协同工作Lightpanda：颠覆Chrome！开源AI浏览器，内存仅1/16，速度飙升9倍BrowserAct Skills – 开源的 AI Agent 浏览器自动化 CLI 工具谷歌重磅开源！Computer Use Preview：用自然语言指挥AI操控浏览器，零代码实现网页自动化 🏛️ 宝玉的分享 · 前沿大模型翻译与提示词工程实战分享专栏，聚焦海外一手 AI 技术动态与工程实践。📄 Markdown 纯净版 💡 这篇内容对您有启发吗？👍 干货满满🔍 期待更深拆解📡 RSS 订阅✨ 提交 AI 工具 / 合作 🚀 Prompt 语宙 AI 创作者生态：探索 2,800+ 全球实用 AI 工具与高精度生图提示词咒语库🧭 语宙 AI 导航 (ai.paooo.com)🎨 AI 生图 Prompt 库📚 核心专题导航⚡ AIGC 早报生成器