SuperAPI AI 工具集

frontend-perf

前端与建站

查看项目

更新于 10-16 08:47

技能介绍

用途:这是 perf-workflow(流程层)的知识层,两者配合使用。为性能证据、定位、假设、监控、优化、验证六个阶段提供前端专属内容,包括量化基准(RAIL/Web Vitals/Electron 指标阈值)、前端瓶颈模式表、渲染管线定位规则、优化优先级参考和通过标准(LCP/INP/CLS/启动时间)。

主要能力:给出 RAIL 模型阈值(响应<100ms、动画每帧<16ms、空闲任务<50ms、加载首屏<2s/可用<5s);Web Vitals 三项核心指标(LCP<2.5s、INP<200ms、CLS<0.1)及其优化重点;Electron 扩展指标(冷启动、热启动<500ms、IPC 往返<50ms、渲染进程内存与主线程 CPU)。列出前端常见瓶颈模式:Reflow、Repaint、主线程长任务、不必要重渲染、IPC 阻塞、内存持续增长、布局抖动、React 并发特性利用不足、Angular Zone 过度触发。

版本要点:React 16/16.8+/18/19 分别涉及 PureComponent 与 shouldComponentUpdate、useMemo/useCallback/React.memo、Concurrent Rendering 与 useTransition、React Compiler;Angular 9+/14+/16+/17+/18+ 分别涉及 Ivy、Standalone Components、Signals、@defer 与 @for track、Zoneless;Electron 12+/20+/22+/28+ 分别涉及 remote 移除与 contextIsolation、sandbox 默认开启、UtilityProcess API、渲染进程原生 ESM。

使用方式:先确认框架版本再选匹配策略;按 P0(拆分长任务、虚拟滚动、避免 reflow、异步 IPC、Web Worker)到 P1(组件记忆化、状态粒度、代码分割、Electron 启动优化)再到 P2(缓存策略、包体积、性能预算与 CI/CD 门禁)排序。分析工具包括 Chrome DevTools Performance/Memory、React DevTools Profiler、Angular DevTools、Lighthouse、app.getAppMetrics()、webpack-bundle-analyzer 等。

限制:具体实现细节见 reference.md;Electron 的 UtilityProcess API、Zoneless 等特性在资料中标注为特定版本引入,实际可用性以运行时版本为准;未提供收费、价格或平台信息。