Egui Web 项目中 Canvas 初始尺寸问题的分析与解决

问题背景

在 Egui Web 项目中，开发者发现了一个关于 Canvas 初始尺寸的有趣问题。当应用首次渲染时，所有窗口元素都会被压缩到一个非常小的尺寸，并挤在左上角。通过日志输出可以观察到，第一帧渲染时获取到的 Canvas 尺寸异常小。

问题现象

具体表现为：

1. 应用启动后第一帧渲染时，Canvas 尺寸远小于预期
2. 所有UI元素被压缩到左上角
3. 后续帧渲染恢复正常

技术分析

经过深入分析，这个问题源于浏览器中异步事件的执行顺序问题。在 Web 环境中，Egui 使用两种重要的异步机制：

1. requestAnimationFrame：用于安排下一帧的渲染
2. ResizeObserver：用于监听元素尺寸变化

问题的关键在于这两种异步回调的执行顺序。在初始状态下，requestAnimationFrame的回调先于ResizeObserver的回调执行，导致第一帧渲染时尚未获取到正确的元素尺寸。

解决方案

核心解决思路是调整这两种异步机制的执行顺序。具体实现方式为：

1. 将首次requestAnimationFrame的注册从初始化阶段移至ResizeObserver的回调中
2. 确保在获取到初始尺寸后才开始第一帧渲染

这种调整保证了：

• 尺寸观察器先执行，获取正确的初始尺寸
• 渲染循环在尺寸确定后才开始
• 避免了第一帧渲染时的尺寸异常问题

实现细节

在代码层面，主要修改了WebRunner的启动逻辑：

1. 移除初始化阶段直接调用requestAnimationFrame
2. 在ResizeObserver回调中首次注册渲染循环
3. 确保尺寸信息在渲染前已正确初始化

技术意义

这个问题的解决不仅修复了一个具体的渲染bug，更体现了Web开发中异步事件处理的重要性。特别是在图形界面渲染场景下，各种异步操作的执行顺序可能对最终结果产生重大影响。

对于Egui这样的即时模式GUI框架而言，确保渲染前所有状态（特别是布局相关状态）的正确性至关重要。这个问题的解决为类似场景提供了有价值的参考。

总结

通过调整异步操作执行顺序，Egui Web项目成功解决了Canvas初始尺寸异常的问题。这个案例展示了在复杂异步环境下，对执行时序的精确控制如何影响最终渲染结果，也为Web图形界面开发提供了有益的经验。