如何在 Rust 中无 Chromium 负担地渲染 HTML 和 CSS

每次有人用 Electron 打包一个小型桌面应用，某个地方的内存条就在哭泣。即便是像 Tauri 这样的替代方案仍然依赖系统 WebView，这在不同的操作系统上有其自身的怪癖。Dioxus 框架的开发者决定走一条艰难的路，用 Rust 从头编写一个轻量级的渲染引擎。他们把这个项目称为 Blitz。

为什么要另起炉灶

Chromium 或 WebKit 包含数 GB 的代码。它们支持 WebGL、WebSockets、WebRTC、蓝牙、IndexedDB 以及数百个浏览器 API。但如果你只需要渲染基于 HTML 和 CSS 的用户界面，这些功能几乎都成了不必要的负担。

Blitz 剥离了所有不必要的东西。这个引擎专注于一个任务：解析 HTML/CSS，计算页面布局，并将结果输出到屏幕或 GPU 纹理。默认情况下没有 JavaScript 引擎。网络堆栈是最小的，只有在你明确需要时才能通过 HTTP 加载资源。系统交互保留在你的 Rust 代码中。

模块化架构

Blitz 的创建者并没有从零开始。他们从开源社区中挑选了经过验证的组件，并将它们组装成一个统一的系统：

• CSS 解析和样式计算由 Stylo 处理——这是 Mozilla Firefox 和 Servo 的 CSS 引擎。
• Flexbox 和 CSS Grid 布局计算由 Taffy 库处理。
• 文本渲染使用 Parley。
• HTML 解析由 html5ever 处理。
• 图形渲染通过 AnyRender 抽象和 Vello 实现。

这种结构提供了灵活性。如果你只需要解析 HTML 并确定元素尺寸而不需要渲染到屏幕，你只需要 crate blitz-dom 和 blitz-html。对于构建原生 Dioxus 应用程序，你需要集成 dioxus-native。

代码中的样子

项目目前处于早期 pre-alpha 阶段，所以你需要从源代码构建。你可以用一分钟时间尝试这些示例：

git clone https://github.com/DioxusLabs/blitz
cd blitz
cargo run --release --package browser

仓库中包含多个演示脚本。例如，你可以直接从控制台运行一个简单的 Markdown 查看器：

cargo run --release --package readme ./README.md

对于已经在使用 Dioxus 并希望消除 WebView 依赖的开发者，仓库提供了原生构建。只需在 Cargo.toml 中添加一个指向 git 版本的直接链接：

[dependencies]
dioxus-native = { git = "https://github.com/DioxusLabs/blitz", features = ["prelude"] }

之后，标准导入 use dioxus::prelude::* 改为 use dioxus_native::prelude::*，UI 就通过 Blitz 渲染了。

局限性和当前状态

用 Blitz 构建商业产品还为时过早。开发者坦诚地警告存在大量 bug 和未实现的功能。基本 CSS 选择器、Flexbox、简单表单和 CSS 变量已经可以工作。然而，复杂的媒体查询或特定布局属性可能表现不可预测。

不过项目确实有一些优势。与 AccessKit 库的集成为屏幕阅读器和辅助功能系统提供了开箱即用的支持。通过 WGPU 进行渲染允许将 HTML 界面直接嵌入游戏引擎或 3D 场景中。

值得一试吗

Blitz 是为那些厌倦了桌面开发中重型浏览器包装的开发者设计的工具。它不会很快成为 Electron 的完整替代品。

目前，这个项目将吸引 Rust 系统程序员、图形引擎研究人员和 Dioxus 生态系统爱好者。关注仓库的开发进展，即使只是为了看 Stylo 和 Taffy 如何演变成 CEF 的轻量级替代方案，也是值得的。