Ladybird 十月进展：样式与布局移出主线程并自研 JS JIT

朋友们好！十月，我们把样式和布局移出了主线程，构建了一个 JavaScript JIT，替换了 WebAssembly 引擎，重新设计了浏览器 UI，并在 Web Platform Tests 上超过了 Safari Technology Preview。:^)

Ladybird 完全由相信开放 Web 的公司和个人资助。你可以在我们的赞助商页面看到所有支持这个项目的人，我们感谢他们所有人。如果你有兴趣赞助，请联系我们。

浏览器通常在一个主线程上运行 JavaScript、样式和布局，一次只做一件事。当脚本运行时，页面无法更新。少数简单的动画可以在合成器上继续运行，但其他一切都要等待。

我们把样式和布局移到了它们自己的线程，把绘制记录移到了另一个线程（#12377、#12400）。它们现在与 JavaScript 同时运行（#12396、#12432、#12460）。如果脚本请求布局信息，比如某个元素的尺寸，它会等到待处理的布局工作完成，因此永远不会拿到过时的数据。

所以现在有两件事可以在长脚本运行期间正常工作：

据我们所知，目前没有其他浏览器能做到这一点。下面是一个文本动画，JavaScript 以 1.5 秒的间隔阻塞主线程，Ladybird 在左上角：

还有一个在每 250 毫秒运行一次 JavaScript 的页面上触发 :hover 的效果，左边是 Ladybird，右边是 Chrome：

你也可以自己试试。按钮会阻塞主线程三秒。大多数浏览器会让方块继续旋转，但会冻结进度条和悬停目标。

在 Linux 和 macOS 上，LibJS 现在会把热点 JavaScript 编译成机器码，x86-64 和 AArch64 都支持（#12613）。

我们过去决定不做 JIT，而是尽力改进和调优解释器。它已经很有竞争力，所以把它提速一倍需要巨大的努力，而那只会把 300 毫秒的卡顿变成 150 毫秒的卡顿，你仍然能感觉到。所以我们需要一个优化型 JIT。

设计刻意保持平淡：基于运行时类型分析的推测性优化，和其他 JavaScript 引擎一样。目前，我们只是想让速度合理地快。

在代码预热期间，我们会记录它看到的类型和对象形状等信息（#12588）。编译后的代码利用这些记录来做猜测，比如“这个值总是整数”，并内联小函数（#12595、#12598）。

为了在开发过程中发现 bug，我们使用了一个 fuzzer，在 JIT 和解释器中运行相同的代码并比较结果（#12601）。

我们替换了原来的 C++ Wasm 引擎和 Cranelift，换成了一个自带解释器和 JIT 的新引擎（#12963）。它支持旧引擎不支持的较新 WebAssembly 特性，比如异常处理和 GC。在两个引擎都能运行的 JetStream 3 Wasm 工作负载上，它的得分大约高出 7 倍。

七月，我们构建了 flap，一种用于编写 LibJS 解释器的小型语言和编译器。Wasm 解释器也是用 flap 编写的，所以一份源码就能为 x86-64、AArch64 和 Windows x64 构建它。热点函数会从这里转移到 JIT，即使在正在运行的循环中间也是如此。

我们在性能上取得了很大进展。JSLinux 是一个 x86 PC 模拟器，现在能在 1.8 秒内启动 Alpine Linux 到 shell，而 Chrome 需要 1.5 秒。

10 月 26 日，我们在 WPT 上超过了 Safari Technology Preview。:^) 月底我们达到 2,184,722 个子测试，增加了 75,650。

大部分增长来自五天，从 10 月 22 日的约 212 万到 10 月 27 日的约 218 万。我们让 AI 编程代理针对 WPT 工作，要求它们补齐缺失的功能。它们做了大量小修复，积少成多。这个月我们最大的增长是 /css 约 30,000 和 /editing 约 10,000。

到目前为止，我们的 UI 是有机生长出来的，各处修修补补。这是我们第一次坐下来规划完整的设计。我们保持它低调安静，让注意力留在页面上。

它涵盖标签页、工具栏、菜单，以及我们在 macOS 和 Linux 上的 about: 页面，有浅色、深色，以及用于隐私窗口的紫色深色主题（#13271、#13169、#12815）。

我们在 Ladybird 中渲染了这个页面，使用了十月落地的功能：

从左上角开始，分别是多列布局（#13026）、display: grid-lanes 用于瀑布流（#13236）、MathML（#13062、#13141）、corner-shape（#12942）、CSS Motion Path（#13027）、更多锚点定位功能（#13021、#13079、#13166），以及 text-wrap: balance（#13461）。

网页运行在沙箱化的渲染进程中，所以一个恶意页面即使接管了它的渲染进程，也应该被困在那里。

我们持续修复来自许多来源的安全问题，包括绕过沙箱的方法。例如，一个被攻陷的渲染进程可以要求浏览器进程打开你电脑上的任何文件。现在只有显示本地文件的渲染进程才能读取它们（#12582、#12590）。渲染进程还可以伪造用户点击来打开弹窗或读取剪贴板。浏览器进程不再信任它们这样做（#12597）。

我们还将浏览器拆分成更多进程，这样被攻陷的进程能触及的范围更小：

在 Windows 上，视频现在可以播放，YouTube 也能用了（#12646、#13195）。硬件视频解码移到了自己的进程，现在在 Linux 上通过 Vulkan 工作（#12868）。我们现在自己读取 MP4 文件，而不是使用 FFmpeg，这修复了跳转和缓冲的问题（#12641）。

LibJS 的运行时在 JIT 落地前不久从 C++ 迁移到了 Rust，所以我们的 JavaScript 引擎现在除了 flap 解释器和垃圾回收器之外，全部是 Rust（#12492）。新的 Wasm 引擎也是 Rust。WebGL、2D canvas、IndexedDB、Streams 和 URL 也迁移过来了（#12699、#12935、#13287、#13083、#12998）。我们还删除了 C++ 的样式计算，所以样式现在完全用 Rust 计算（#12346）。

我们的第一个 alpha 计划在今年晚些时候发布。这个月我们添加了：

十月就到这里。感谢阅读，我们下个月见！