企业官网建设流程全解析

引言：Devtools 是什么

Freya 内置了一套开发者工具（Devtools），用于在开发阶段检查 UI 树结构和监控运行时性能。它类似浏览器里的 F12 开发者工具，但专门服务于 Freya 的原生 GUI 应用。

核心能力就两个：

• Tree Inspection（树检查）：查看运行时的 UI 节点树，类似浏览器的 Elements 面板
• FPS Overlay（帧率叠加层）：在窗口上实时显示帧率，快速判断渲染性能

启用 Devtools

Devtools 不是默认开启的，需要通过 Cargo feature 显式启用。

Cargo.toml

[dependencies] freya = { version = "0.4", features = ["devtools"] }

只需加上 “devtools” 这一个 feature，Freya 在 launch() 启动时会自动注册 DevtoolsPlugin，无需手动写任何初始化代码。

两种工作模式

Freya Devtools 提供两种使用方式：

模式一：应用内叠加层（In-App Overlay）

启用 devtools feature 后，你的应用窗口上会直接叠加显示信息层。最常用的就是 FPS 显示——在窗口角落实时渲染当前帧率数字。

这在开发阶段非常直观：改了布局、加了动画，扫一眼角落的数字就知道有没有掉帧。

模式二：远程调试服务器（Devtools Server）

freya-devtools 是一个独立的 crate，它启动一个基于 WebSocket 的调试服务器。 应用运行时，Devtools 会把 DOM 状态、布局信息、性能数据通过 WebSocket 推送出去，外部工具可以连接进来做更深入的检查。

┌──────────────┐ WebSocket ┌──────────────────┐
│ Freya App │ ─────────────▶ │ Devtools Client │
│ (devtools │ │ (浏览器/自定义) │
│ enabled) │ │ │
└──────────────┘ └──────────────────┘

远程模式的依赖链包括 hyper、tungstenite（WebSocket）、serde_json 等，这些都是 optional 依赖，只有启用 devtools feature 时才会编译进来。

Devtools 能看到什么

Devtools 挂载在 Freya 的渲染管线上，能捕获以下信息：

DOM 树结构

rect (root)
├── rect (counter display)
│ └── text “42”
└── rect (actions bar)
├── button “Increase”
│ └── text “Increase”
└── button “Decrease”
└── text “Decrease”

每个节点可以看到：

• 节点类型（rect / label / button / image 等）
• 布局属性（width、height、padding、margin 等计算后的值）
• 样式属性（background、color、shadow 等）

性能状态

• 实时 FPS
• 每帧渲染耗时
• 布局计算耗时

这些信息对定位性能瓶颈非常有用——比如你发现某个列表滚动时 FPS 从 60 掉到 30，就可以在 Devtools 里检查是不是有不必要的重渲染或者布局计算过重。

动手练习

练习 1：启用 Devtools 观察 FPS

拿上一课的计数器示例，只需改一行 Cargo.toml：

[dependencies] freya = { git = "https://github.com/marc2332/freya", branch = "main", features = ["devtools"] }

然后运行：

cargorun

观察窗口角落是否出现 FPS 数字。快速点击按钮，看帧率有没有波动。

练习 2：制造一个性能问题并观察

故意写一个每帧都重算的组件，观察 FPS 变化：

usefreya::prelude::*;fnmain(){launch(LaunchConfig::new().with_window(WindowConfig::new(app).with_size(500.,400.)),);}fnapp()->implIntoElement{letmutheavy=use_state(||0);// 每次状态变化都触发一次"重计算"letcomputed={letmutsum=0;foriin0..10000{sum+=i;}sum};rect().width(Size::fill()).height(Size::fill()).background((20,20,30)).color((255,255,255)).center().font_size(24.).child(rect().vertical().center().spacing(16.).child(format!("计算结果: {}",computed)).child(Button::new().on_press(move|_|{*heavy.write()+=1;}).child("触发重渲染"),),)}

点击按钮时观察 FPS 是否下降。然后试着把 10000 改成 1000000，感受计算量对帧率的影响。

注意事项

⚠️ Devtools 仅在开发阶段使用。启用 devtools feature 会增加编译时间和二进制体积（因为引入了 WebSocket 服务器等依赖），发布版本应去掉这个 feature：

开发时

freya = { version = "0.4", features = ["devtools"] }

发布时

freya = "0.4"

⚠️ Freya 0.4 的 Devtools 仍处于实验阶段（官方标记为 experimental），API 可能会随版本迭代变化。

小结

要点 内容
启用方式 Cargo.toml 加 features = [“devtools”]
自动注册 launch() 时自动挂载 DevtoolsPlugin
核心功能 UI 树检查 + FPS 叠加层
远程调试 基于 WebSocket 的 Devtools Server
生产环境 务必去掉 devtools feature

贴代码

第4课 练习答案与知识点总结

练习 1 答案：启用 Devtools 观察 FPS

完整代码

Cargo.toml

[package] name = "freya-devtools-demo" version = "0.1.0" edition = "2021" [dependencies] freya = { git = "https://github.com/marc2332/freya", branch = "main", features = ["devtools"] }

src/main.rs

usefreya::prelude::*;fnmain(){launch(LaunchConfig::new().with_window(WindowConfig::new(app).with_size(400.,300.)),);}fnapp()->implIntoElement{letmutcount=use_state(||0);rect().width(Size::fill()).height(Size::fill()).background((30,50,90)).color((255,255,255)).center().font_size(48.).child(rect().vertical().center().spacing(24.).child(count.read().to_string()).child(Button::new().on_press(move|_|{*count.write()+=1;}).child("点击 +1"),),)}

预期观察结果

• 窗口角落出现 FPS 数字叠加层（通常稳定在 60 FPS 左右）
• 快速连续点击按钮时，FPS 基本不波动——因为 Freya 的响应式系统只重渲染引用了 count.read() 的节点，按钮本身不会重绘
• 停止操作后 FPS 恢复稳定

关键验证点
验证项 预期
编译是否成功 ✅ devtools feature 自动拉入 WebSocket 等依赖
窗口角落是否有 FPS 显示 ✅ 叠加层自动出现
快速点击时 FPS 变化 基本无变化，说明重渲染粒度很细
去掉 devtools feature 后重新编译 FPS 叠加层消失，二进制体积变小

练习 2 答案：制造性能问题并观察

完整代码

usefreya::prelude::*;fnmain(){launch(LaunchConfig::new().with_window(WindowConfig::new(app).with_size(500.,400.)),);}fnapp()->implIntoElement{letmutheavy=use_state(||0);// ⚠️ 这段计算在每次 app() 被调用时都会执行// 当 heavy 状态变化 → 触发重渲染 → app() 重新执行 → 这里重新计算letcomputed={letmutsum:u64=0;foriin0..1_000_000u64{sum+=i;}sum};rect().width(Size::fill()).height(Size::fill()).background((20,20,30)).color((255,255,255)).center().font_size(24.).child(rect().vertical().center().spacing(16.).child(format!("计算结果: {}",computed)).child(Button::new().on_press(move|_|{*heavy.write()+=1;}).child("触发重渲染"),),)}

预期观察结果
循环次数 FPS 表现
10_000 几乎无感知，FPS 稳定 60
100_000 轻微波动，偶尔掉 1-2 帧
1_000_000 明显掉帧，点击时 FPS 骤降
10_000_000 严重卡顿，窗口可能短暂无响应

为什么会掉帧？

点击按钮
→ *heavy.write() += 1 （状态变化）
→ Freya 响应式核心检测到依赖变化
→ 重新调用 app() 函数
→ ⚠️ 重新执行 1_000_000 次循环
→ 这一帧的 CPU 时间被大量占用
→ FPS 下降

知识点总结

1、Devtools 启用机制

Cargo.toml 加 features = [“devtools”]
↓
编译时引入 freya-devtools crate
↓
launch() 启动时自动注册 DevtoolsPlugin
↓
DevtoolsPlugin 挂载到渲染管线
↓
运行时自动叠加 FPS 显示 + 可连接远程调试

不需要写任何初始化代码，这是 Freya 0.4 的插件化设计——feature flag 控制编译，launch() 自动发现并注册。

2、Devtools 的两种模式

┌─────────────────────────────────────────────┐
│ Freya Devtools │
│ │
│ ┌─────────────────┐ ┌──────────────────┐ │
│ │ In-App Overlay │ │ Remote Server │ │
│ │ │ │ │ │
│ │ • FPS 叠加层 │ │ • WebSocket 推送│ │
│ │ • 直接看窗口 │ │ • 外部工具连接 │ │
│ │ • 零配置 │ │ • DOM 树检查 │ │
│ └─────────────────┘ └──────────────────┘ │
└─────────────────────────────────────────────┘

3、性能问题的本质

Freya 的响应式更新模型：

状态变化 → 重新执行组件函数 → 重新计算所有局部变量

关键认知：组件函数里的所有代码都会在每次重渲染时重新执行，不仅仅是 UI 描述部分。如果你在函数体内写了耗时计算，它会跟着每次重渲染一起跑。

4、性能优化方向（预习）

// ❌ 错误：每次重渲染都重算
let computed = expensive_calculation();

// ✅ 正确：用 use_memo 缓存，只在依赖变化时重算
let computed = use_memo(move || expensive_calculation());

// ✅ 正确：把重计算放到事件回调里，不在组件函数体内
let on_click = move |_| {
let result = expensive_calculation();
*state.write() = result;
};

use_memo 是 Freya 0.4 提供的记忆化钩子，它会缓存上一次的计算结果，只有当闭包捕获的依赖发生变化时才重新计算。这是下一课布局系统之后会深入讲解的内容。

本课核心记忆点

知识点 一句话
启用 Devtools Cargo.toml 加 features = [“devtools”]，零代码配置
FPS 叠加层 自动出现在窗口上，开发时保持开启
发布时移除 去掉 devtools feature，减小体积、提升性能
组件函数重执行 状态变化 → 组件函数整体重新执行，包括所有局部计算
性能陷阱 耗时计算不要放在组件函数体内，用 use_memo 缓存