可能解决Tauri多窗口应用阻塞问题

发布时间： 2025-09-17 14:21:48

更新时间： 2025-09-17 16:56:53

🕒 阅读时间：7 min read 👀 阅读量：Loading...

💡

本文存在AI分析生成的内容，仅供参考

请注意辨别

我发现的一个有趣现象🤔

存在问题的旧版

之前我的主进程main.ts都是挂载在index.astro上

1
---
2
import Layout from '../layouts/Layout.astro';
3
import About from '../components/about/About.vue';
4
---
5

6
<Layout title="pages.about">
7
  <About client:only />
8
</Layout>
9
<script type="module" src="src/xxxx/main.ts"></script>

每次打开主窗口都会出现阻塞现象,比如说窗口的最小化,全屏,关闭等操作都需要等到窗口完全加载完毕才会响应(包括可能的后台逻辑也要初始化完毕才会响应)，就是在视觉上好像是加载完了，但是无论如何都无法与窗口交互，我得resize一下窗口(某些进程可能被迫中止？)，然后会强制刷新一下窗口，这个时候就可以交互了。

意外发现的解决方案

1
<script type="module" src="src/xxxx/main.ts"></script>

此处about内容转到其它页，保持主页只加载main.ts,且保持隐藏，我发现这个问题就解决了，窗口可以正常交互了。

接着，对于主窗口，采取不可见方式

1
{
2
  "windows": [
3
    {
4
      "label": "main",
5
      ...
6
      "visible": false,
7
      ...
8
    }
9
  ]
10
}

然后我重新打开各个窗口，发现没有任何阻塞问题了

基于 main.ts 代码的深入分析

ℹ️

以下内容为AI分析生成，仅供参考

现在看到了 main.ts 具体代码，基于这段代码重新分析阻塞问题的根本原因：

1. main.ts 代码结构分析

AI分析：以下是对main.ts代码结构的分析

main.ts 包含以下关键元素：

1
// 模块导入
2
import { filespace } from './filespace';
3
import { autostart } from './autostart';
4
import { quitItem } from './quitItem';
5
// ... 其他导入
6

7
// 直接执行的异步代码（模块级别）
8
try {
9
  const menu = await Menu.new({...});
10
  const _tray = await TrayIcon.new(options);
11
} catch (error) {
12
  // 错误处理
13
}

2. 阻塞问题的根本原因

AI分析：以下是对阻塞问题根本原因的分析

模块级别异步执行的陷阱：

导入阻塞效应：
- 导入的模块（filespace、autostart 等）可能包含复杂的初始化逻辑
- 这些模块的导入和执行会阻塞 JavaScript 的执行线程
- 在旧版本中，这发生在页面渲染完成后，干扰了窗口事件处理
系统托盘创建的时序问题：
- TrayIcon.new() 是一个异步操作
- 在旧版本中，这个操作在窗口已经显示后才开始
- 可能导致系统托盘初始化与窗口事件循环产生冲突
WebView 线程阻塞：
- 模块级别的异步代码执行会占用 WebView 的主线程
- 窗口事件处理也依赖于这个主线程
- 结果是窗口事件无法及时响应

3. 脚本位置调整的真正效果

旧版本（底部加载）：

1
页面渲染 → DOM 完成 → 脚本加载 → 模块导入执行 → 托盘创建 → 窗口事件阻塞

新版本（头部加载）：

1
脚本加载 → 模块导入执行 → 托盘创建 ↔ 页面渲染 → 窗口事件正常

通过提前执行脚本：

系统托盘的创建与页面渲染并行进行
避免了在窗口显示后才进行大量异步操作
确保 WebView 主线程在关键时刻保持可用

4. 更精确的根本机制

AI分析：以下是对根本机制的更精确分析

这个阻塞问题实际上是 异步操作时序与窗口事件处理的竞争条件：

竞争一方：系统托盘创建等异步操作
竞争一方：窗口事件处理循环
结果：异步操作阻塞了事件处理，导致窗口无响应

5. 代码层面的优化建议

AI分析：以下是基于代码结构的优化建议

基于我的代码结构，我建议进行以下优化：

1
// 方案1：延迟执行托盘创建
2
window.addEventListener('load', async () => {
3
  try {
4
    const menu = await Menu.new({
5
      items: [about, filespace, notes, autostart, restartItem, quitItem],
6
    });
7
    const options = {
8
      tooltip: 'Wngtools',
9
      menu: menu,
10
      icon: await defaultWindowIcon(),
11
    };
12
    const _tray = await TrayIcon.new(options);
13
  } catch (error) {
14
    console.error('创建系统托盘失败:', error);
15
  }
16
});
17

18
// 方案2：使用 setTimeout 延迟执行
19
setTimeout(async () => {
20
  // 托盘创建代码
21
}, 100);

6. 验证和调试建议

AI分析：以下是验证和调试的建议

添加调试日志：

1
console.log('开始创建系统托盘...');
2
const startTime = Date.now();
3

4
// 在关键位置添加时间戳
5
console.log(`托盘创建完成，耗时: ${Date.now() - startTime}ms`);

监控窗口事件：

1
// 在 main.ts 中添加窗口事件监听
2
import { getCurrentWindow } from '@tauri-apps/api/window';
3

4
const window = getCurrentWindow();
5
window.onCloseRequested(() => {
6
  console.log('窗口关闭事件被触发');
7
});

⚠️

AI分析：以下是关于代码规范的警告

代码中直接在模块级别执行异步操作是很危险的做法。虽然头部加载解决了问题，但还是建议使用更规范的初始化方式来避免潜在的竞态条件。