🕒 阅读时间：2 分钟 📝 字数：797 👀 阅读量： Loading...
:::tip
本文存在AI分析生成的内容，仅供参考
请注意辨别
:::
之前我的主进程main.ts都是挂载在index.astro上
---
import Layout from '../layouts/Layout.astro';
import About from '../components/about/About.vue';
---
<Layout title="pages.about">
<About client:only />
</Layout>
<script type="module" src="src/xxxx/main.ts"></script>
每次打开主窗口都会出现阻塞现象,比如说窗口的最小化,全屏,关闭等操作都需要等到窗口完全加载完毕才会响应(包括可能的后台逻辑也要初始化完毕才会响应)，就是在视觉上好像是加载完了，但是无论如何都无法与窗口交互，我得resize一下窗口(某些进程可能被迫中止？)，然后会强制刷新一下窗口，这个时候就可以交互了。
<script type="module" src="src/xxxx/main.ts"></script>
此处about内容转到其它页，保持主页只加载main.ts,且保持隐藏，我发现这个问题就解决了，窗口可以正常交互了。
接着，对于主窗口，采取不可见方式
{
"windows": [
{
"label": "main",
...
"visible": false,
...
}
]
}
然后我重新打开各个窗口，发现没有任何阻塞问题了
:::info 以下内容为AI分析生成，仅供参考 :::
现在看到了 main.ts 具体代码，基于这段代码重新分析阻塞问题的根本原因：
:::ai AI分析：以下是对main.ts代码结构的分析 :::
main.ts 包含以下关键元素：
// 模块导入
import { filespace } from './filespace';
import { autostart } from './autostart';
import { quitItem } from './quitItem';
// ... 其他导入
// 直接执行的异步代码（模块级别）
try {
const menu = await Menu.new({...});
const _tray = await TrayIcon.new(options);
} catch (error) {
// 错误处理
}
:::ai AI分析：以下是对阻塞问题根本原因的分析 :::
模块级别异步执行的陷阱：
导入阻塞效应：
filespace、autostart 等）可能包含复杂的初始化逻辑系统托盘创建的时序问题：
TrayIcon.new() 是一个异步操作WebView 线程阻塞：
旧版本（底部加载）：
页面渲染 → DOM 完成 → 脚本加载 → 模块导入执行 → 托盘创建 → 窗口事件阻塞
新版本（头部加载）：
脚本加载 → 模块导入执行 → 托盘创建 ↔ 页面渲染 → 窗口事件正常
通过提前执行脚本：
:::ai AI分析：以下是对根本机制的更精确分析 :::
这个阻塞问题实际上是 异步操作时序与窗口事件处理的竞争条件：
:::ai AI分析：以下是基于代码结构的优化建议 :::
基于我的代码结构，我建议进行以下优化：
// 方案1：延迟执行托盘创建
window.addEventListener("load", async () => {
try {
const menu = await Menu.new({
items: [about, filespace, notes, autostart, restartItem, quitItem],
});
const options = {
tooltip: "Wngtools",
menu: menu,
icon: await defaultWindowIcon(),
};
const _tray = await TrayIcon.new(options);
} catch (error) {
console.error("创建系统托盘失败:", error);
}
});
// 方案2：使用 setTimeout 延迟执行
setTimeout(async () => {
// 托盘创建代码
}, 100);
:::ai AI分析：以下是验证和调试的建议 :::
添加调试日志：
console.log("开始创建系统托盘...");
const startTime = Date.now();
// 在关键位置添加时间戳
console.log(`托盘创建完成，耗时: ${Date.now() - startTime}ms`);
监控窗口事件：
// 在 main.ts 中添加窗口事件监听
import { getCurrentWindow } from "@tauri-apps/api/window";
const window = getCurrentWindow();
window.onCloseRequested(() => {
console.log("窗口关闭事件被触发");
});
:::warning AI分析：以下是关于代码规范的警告 :::
代码中直接在模块级别执行异步操作是很危险的做法。虽然头部加载解决了问题，但还是建议使用更规范的初始化方式来避免潜在的竞态条件。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。