SuperAPI AI 工具集

performance-pass-ui

前端与建站

查看项目

更新于 10-16 06:43

技能介绍

用途:对指定 UI 界面(路由或组件)做一次聚焦的性能优化,消除明显的性能回归与热点,不改变用户可见行为。

主要能力:处理不必要的重渲染、渲染中的昂贵派生计算、无界列表或过重 DOM、可避免的包体积膨胀与懒加载缺失。

输入:目标 UI 界面(路由/组件);已知症状(渲染慢、卡顿、输入延迟、TTI 长);仓库配置(优先 <repo>/REPO_PROFILE.json,含框架、工具链、命令);已有测量工具(React DevTools Profiler、性能标记、日志)。

输出:最小化的性能改进代码;在注释中说明权衡(为何用记忆化、为何虚拟化);如可测量,可在 PR 摘要中附前后对比说明。

工作流:先建立基线,复现问题或定位热点路径,优先使用可测量证据;找出主要问题,如重渲染级联(props 引用变化)、渲染中的重计算、未虚拟化的大列表、过度重复请求或校验循环;应用最小有效修复,仅在计算非平凡时用 useMemo 记忆派生值,仅在能阻止引用变化时用 useCallback 稳定回调,拆分组件缩小重渲染范围,大列表加虚拟化,重路由/组件按仓库惯例加懒加载;验证行为不变,UI 输出与交互一致,并按配置运行校验。

检查项:无用户可见行为变化;类型检查/lint 通过(若已配置);性能改进合理且局部化(热点路径渲染更少、每次渲染工作量更少、或负载减少/重组件延迟加载);不引入新的无限循环(effect、memo 依赖、查询失效)。

失败模式:无性能问题证据时,先加最小测量或拒绝改动;记忆化导致 UI 陈旧时,修正依赖或移除优化;优化使复杂度大增时,回退并提出更安全方案;大列表性能问题建议虚拟化,若不允许则限制渲染行数。

遥测记录:skill: frontend/performance-pass-ui;target: <route/component>;techniques: memo | split | virtualization | lazy-load | effect-fix | other;files_touched;outcome: success | partial | blocked。

限制:不做视觉重设计,不为风格重构,不引入新依赖(除非仓库标准),不做无证据的过早微优化。