Blitz：轻量级、模块化、可扩展的网页渲染器

Blitz 是一个为支持"Dioxus Native"项目而构建的"原生"HTML/CSS 渲染器。它实际上是一个轻量级的 WebView，但将 JavaScript 引擎替换为原生 Rust API，允许 Rust 的响应式/状态管理库（如 Dioxus）直接与之交互。

在 Dioxus Discord 的 #native 频道与我们交流

目前有两个前端：

• HTML/markdown 前端，可以渲染 HTML 字符串。这对于预览 HTML 和/或 markdown 文件很有用，但目前缺乏交互性。
• Dioxus 前端，可以渲染 Dioxus VirtualDom。通过 Dioxus 的事件处理，它支持完整的交互功能。

Blitz 基于以下技术构建：

• Stylo（Firefox 的并行浏览器级 CSS 引擎）用于 CSS 解析
• Vello + WGPU 用于渲染
• Taffy 用于盒级布局
• Parley 用于文本/行内级布局
• AccessKit 用于无障碍功能
• Winit 用于窗口管理和输入处理

注意：此仓库包含使用 Stylo 的 Blitz 新版本。旧版本的源代码仍可在 legacy 分支上找到，但不再积极开发。

截图

Dioxus 渲染器：

HTML 渲染器（渲染 google.com）：

试用

1. 克隆此仓库
2. 运行示例：
   • cargo run --example google
   • cargo run --example url https://myurl.com
   • 其他可用示例
   • 添加 --release 以获得更好的运行时性能
3. 按 Ctrl/Cmd + + / Ctrl/Cmd + - 更改缩放，按 F1 显示布局矩形

目标

Blitz 旨在渲染 HTML 和 CSS - 我们不想支持浏览器的全部功能（或者至少我们希望所有这些"额外"功能都是可选的）。我们认为，对于渲染 HTML/CSS 的基本用例来说，浏览器过于臃肿。

我们打算支持：

• 现代 HTML 布局（flexbox、grid、table、block、inline、absolute/fixed 等）
• 高级 CSS（复杂选择器、媒体查询、CSS 变量）
• HTML 表单控件
• 使用 AccessKit 实现无障碍功能
• 通过自定义小部件实现可扩展性

值得注意的是，我们不提供 WebRTC、WebSocket、蓝牙、localStorage 等功能。在原生应用中，许多这样的功能可以使用常规的 Rust crate 来实现，不需要与渲染器耦合。

我们目前还没有为其他语言（JavaScript、Python 等）提供 Blitz 绑定，但欢迎这方面的贡献。

架构

Blitz 分为几个部分：

• blitz-dom：核心 DOM 抽象，包括样式解析和布局，但不包括绘制/渲染。结合了 Stylo 和 Taffy 的优点，允许您构建可扩展的类 DOM 结构。
• blitz：为 blitz-dom 添加基于 Vello/WGPU 的渲染器
• dioxus-blitz：Blitz 的 Dioxus 集成层。使用 Blitz 渲染您的 Dioxus 应用。目前 dioxus-blitz 还包含 HTML 渲染器，但将来可能会拆分为单独的包。

状态

Blitz 目前处于实验阶段。我们正在积极努力使其达到可用状态，但我们目前不建议用它构建应用程序。

待办事项

• 核心 DOM 树抽象
• 使用 html5ever 解析样式
• 为 html5ever 文档计算样式
• 使用 Taffy 计算布局
• 使用 WGPU 渲染

渲染

• 渲染到窗口
• 渲染到图像
• 渐变
• 边框/轮廓
• 光栅图像（png、jpeg 等）
• 缩放
• SVG
  • 外部 SVG（基本支持）
  • 内联 SVG
• 阴影
• 动画/过渡
• 标准表单控件（复选框/下拉菜单/滑块等）
• 自定义小部件
• 阴影元素

布局

• 内联（部分支持 - 实现仍不成熟）
• 块级
• Flexbox
• Grid
  • 命名网格线
  • 子网格
• 表格
• Z-index
• 其他 CSS 功能
  • box-sizing: content-box
  • calc()
  • position: static
  • direction: rtl
  • transform

文本

• 字体加载
  • 系统字体加载
  • Web 字体加载
• 文本
  • 字形/双向文本
  • 布局/换行
  • 字体大小/行高
  • 文本颜色
  • 粗体/斜体
  • 下划线/删除线
• 文本选择

输入

• 滚动
  • 根视图
  • 任何 overflow: scroll 元素
• 悬停检测
• 点击处理
• 文本输入

性能

• 热重载
• 滚动时无需重新解析样式和布局
• 样式缓存
• 布局缓存

其他

• 多窗口
• 无障碍树
• 焦点
• 开发者工具
• 上下文菜单钩子
• use_wgpu_context() 以获取元素作为任意渲染表面

许可证

本项目采用 Apache 2.0 和 MIT 双重许可

除非您明确声明，否则您有意提交以包含在 stylo-dioxus 中的任何贡献都应按 MIT 许可，无任何附加条款或条件。