用途:面向智能体 UI 的性能优化技能,当智能体界面缓慢、臃肿或卡顿时使用。整个 View 以单个 HTML 字符串获取,挂载在全新 iframe 中且会被频繁丢弃,因此每一毫秒都处于关键路径上。
主要能力与要点: 包体积。将 View 内联进资源,2 MB 包每次挂载都是 2 MB。用 vite-plugin-singlefile 或 esbuild 打成单个 ESM 模块内联进 script type="module",这也会清空 resourceDomains(安全收益)。保持依赖精简,优先平台能力(Intl 代替日期库、CSS grid 代替布局库、内联 SVG 代替图标包),做 tree-shaking 并面向现代输出。粗略预算:内联卡片 200 KB 以下、全屏 500 KB 以下,超过 1 MB 用户会看到明显空档。
感知延迟与流式。使用 app.ontoolinput 在结果前先渲染骨架屏(真实参数、正确行数);app.ontoolinputpartial 流式渲染部分输入,但视其为不完整,只渲染不执行、不发送到服务器,且 M365 Copilot 不支持、需有回退。
避免重挂载。几乎总是因 UI 资源挂到频繁调用的工具上。解决办法是拆分数据工具(无 resourceUri)与渲染工具(携带 resourceUri),本地交互直接调用标记 visibility: ["app"] 的工具,不重挂载。
往返与轮询。批量调用、对用户驱动调用去抖(250–400 ms)、缓存不可变查询。轮询用 app-only 工具并在 onteardown 清理,配合 document.hidden 检查;错误时退避。
大载荷用分页 base64 分块并显示进度。离屏用 IntersectionObserver 暂停动画、轮询等。sendSizeChanged 需去抖(约 100 ms)、取整,切勿在尺寸变更处理器内调用。渲染上虚拟化超约 100 行的列表,动画仅用 transform/opacity 并尊重 prefers-reduced-motion,避免布局抖动。
测量:用 performance.mark/measure 跟踪首次渲染时间、包体积、每次交互往返数、每会话重挂载数(应几乎为 1)。
限制:部分能力(如 ontoolinputpartial、onteardown)在 M365 Copilot 不受支持,需回退或额外保护。